Trasformare testo in pulsante 
Autore: Alberto Maria C.Buonasera a tutti, ho un problema con un testo di un pulsante.
In pratica ho preso un template che ha ad un certo punto 4 campi di testo con delle scritte dentro disposte su 3 righe. Ora il fatto è che praticamente vorrei che questi riquadri contenenti il testo diventino dei pulsanti che mandino ad alcune pagine del sito. Ma non riesco a venirne a capo. Ho provato a creare dei png e inserirli come immagini ma poi non so perchè tutti e 4 vicino non vanno bene, è come risultassero di misure diverse.
Ho provato creando un codice html ma senza riuscire a risolvere nulla.
https://www.paideiacf.it/test/index.html
Il pulsante in questione è quello con scritto Indagini supplementari.
Il terzo che vedete è quello fatto da me con il seguente codice html
<a href="URL_della_pagina" style="display: block; width: 750px; height: 100px; background-color: #f8f8f8; text-align: center; text-decoration: none; color: #333; font-family: sans-serif; border: 1px solid #ccc;">
<span style="font-size: 26px; font-family: Ubuntu, sans-serif; display: block; margin-top: 10px;">INDAGINI SUPPLEMENTARI</span>
<span style="display: block; width: 50px; height: 3px; background-color: #ff6600; margin: 15px auto;"></span>
<span style="font-size: 14px; font-family: 'PT Sans Narrow', sans-serif; display: block; margin-bottom: 10px;">Attrezzature di Lavoro</span>
</a>
Grazie a chi mi aiuterà
Ciao. Perché non usi l'oggetto gratuito "Pulsante" messo a disposizione da Website X5? Non ho ancora dato uno sguardo al tuo sito ma con quell'oggetto sono sicuro che risolvi
Autore
Ho provato ad usarlo, ma non riesco a capire come impostare il testo su 3 righe (di cui la seconda è una linea arancione)
... secondo me dovresti provare con calma ad usare le opzioni disponibili, puoi farci di tutto...
... comunque, per i due pulsanti regolari, senza doverli modificare, se ti interessa risolvere in 1 secondo con una mia invenzione con semplice codice EXTRA, avvisami e tornerò qui, ...e nel caso lo farai si tratterà poi di un solo, semplice, innocuo ed immediato copia/incolla...
.
ciao
.
Questo proviene dal suo stesso template utilizzando le opzioni che il prodotto incomedia offre come esattamente suggerito da kolasim . E' questo quello che vorresti? ESEMPIO
vedi se ti è utile è anche descritta la procedura:
https://giancawordpress.altervista.org/link-testo.html
Io credo che lui voglia ottenere qualcosa del genere da quel che ho capito dopo che ho guardato il suo link:
https://www.bozzasito001.altervista.org/box-cliccabili/
Praticamente l'intero box con il testo disposto su due righe e con al centro la barretta arancione, deve essere cliccabile e portare ad una determinata pagina del sito
Tra poco ti indico come fare se è quello che volevi ottenere
In un oggetto Codice HTML inserisci questo codice sotto come da screenshot a seguire:
<a href="page-1.html" class="cliccable-box">
<h2>INDAGINI SUPPLEMENTARI</h2>
<div class="line"></div>
<p>Attrezzature di Lavoro</p>
</a>
P.S. NON selezionare "Larghezza 100%", fai tutto esattamente come nello screenshot...
Mentre nella sezione "Esperto" dello stesso Oggetto Codice HTM, inserisci questo CSS, segue anche screenshot:
.cliccable-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 300px; /* Modifica la larghezza se necessario */
padding: 20px;
background-color: #F5F5F5; /* Modifica il colore di sfondo del box cliccabile */
border: 1px solid #ccc;
text-align: center;
cursor: pointer;
text-decoration: none;
color: black;
transition: transform 0.3s ease-in-out;
}
.cliccable-box:hover {
transform: scale(1.05);
}
.cliccable-box h2 {
margin: 0;
font-size: 18px;
}
.line {
margin: 15px 0;
width: 70px;
height: 5px;
background-color: orange;
}
.cliccable-box p {
margin: 0;
font-size: 16px;
}
Fammi sapere se era quello che volevi ottenere, ciao
Poi volendo puoi sia renderli "indipendenti" l'uno dall'altro a livello di CSS MODIFICANDO la classe "cliccable-box" es. in "cllccable-box1" nel primo box, poi nell'altro box in "cliccable-box2" ecc. (la classe va cambiata in tutto il CSS di ogni box) e riportando la classe modificata nel relativo codice HTML di ogni box, tipo, per il primo box:
<a href="page-1.html" class="cliccable-box1">
<h2>INDAGINI SUPPLEMENTARI</h2>
<div class="line"></div>
<p>Attrezzature di Lavoro</p>
</a>
Mentre per il secondo box:
<a href="page-1.html" class="cliccable-box2">
<h2>INDAGINI SUPPLEMENTARI</h2>
<div class="line"></div>
<p>Attrezzature di Lavoro</p>
</a>
IMPORTANTE!
Puoi rendere i box anche responsive con delle @media queries. Ho aggiornato l'esempio precedente e puoi vedere i due box responsive sotto ai primi due, quelli più lunghi e con sfondo bianco.
P.S. Online ho aggioranto il codice inserendo i box di testo in un div in modo tale da centrare meglio lo stesso box sulla pagina. Il codice lo puoi prelevare selezionando "Visualizza sorgente pagina" dopo che hai fatto click con il tasto destro del mouse sulla pagina online del mio esempio (quelli di sopra NON sono responsive, mentre i due di sotto lo sono). Ciao
Ma scusate ma NON basterebbe mettere un "Scopri di più" clikkabile sotto al testo del box che sarebbe più semplice e indirizzerebbe l'utente nella pagina desiderata?? Ma anche uno stesso Button Hover ma si può fare in tremila modi con le opzioni di programma. NOTA: Per Giuseppe Guida e Giancarlo Web: Interessante comunque i vostri codici e praticamente utili per chi vuole smanettare. Li catturo con il vostro consenso e crediti inviolabili.
ma figurati Rob... sono sempre a disposizione i codici ci mancherebbe
Vai tranquillo Roberto. Prendi pure.
Ciao