Trasformare testo in pulsante 
Autor: 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
Autor
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
Autor
buonasera, scusate se riprendo questo post ma avrei bisogno di aiuto.
Ho seguito i codici postati dal gentile Giuseppe Guida, ma ho problemi di visualizzazione sui tablet e cellulari. I pulsanti non sono responsive. Ho provato a ricopiare il codice facendo come da istruzioni di Giuseppe dalla pagina che ha pubblicato online, ma non sono riuscito a venirne a capo.
Qualcuno mi aiuterebbe?
se vuoi essere aiutato dagli altri utenti, devi riaprire il post (togliendo il corretto) altrimenti nessuno può risponderti...
metti anche il link della pagina della tua prova online...
Autor
Grazie mille Claudio, non sapevo come fare, ora dovrei averlo riaperto.
La mia pagina è questa https://www.paideiacf.it/test/
Ho provato con le @media queries ma non sono riuscito nell'intento.
Hai provato Alberto a fare quesa modifica?
width: "100%"; /* Modifica la larghezza se necessario */
Autor
Si ci ho già provato, non è cambiato nulla purtroppo.
sembra ok dal mio test.
Autor
Riesci ad aprire il mio link da cellulare???
A me esce così
Autor
Io avevo provato ad aggiungere al codice esperto
.cliccable-box1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: "100%"; /* Modifica la larghezza se necessario */
padding-top: 80px;
padding-bottom: 80px;
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-box1:hover {
transform: scale(1.03);
}
.cliccable-box1 h2 {
margin: 0;
font-size: 28px;
font: "PT Sans Narrow";
}
.line {
margin: 15px 0;
width: 70px;
height: 3px;
background-color: orange;
}
.cliccable-box1 p {
margin: 0;
font-size: 16px;
}
questo
@media only screen and (min-width: 0px) and (max-width: 480px) {
a { width: "50%"; background-color: #000000}
}
in cui a era il codice messo nella sezione "codice HTML" per tutto il box, ma niente, non cambia nulla
link test:
https://giancawordpress.altervista.org/webtest/page-1.html
Autor
Si ho provato dal cell e funziona bene, e perchè a me non va allora???
... l'esempio che ti ha appena postato Giancarlo direi che vada molto bene...
... ormai hai cambiato struttura; ... .... ma se mi seguivi al tempo forse potevi aver risolto allora in un secondo...
... se per caso ti dovesse ancora interessare, posta qui anche un esempio test2 senza codici con quei pulsanti normali come lo erano all'origine...
.
Ti allego qui il progettino con i pulsanti responsive, il codice lo trovi nell'Oggetto Codice HTML sezione HTML e sezione Esperto per il CSS.
Ciao
Ci vuole meno di mezzo nano secondo per il mio uovo di Pasqua:
SERVE UN OGGETTO HTML
Copiare su "CODICE" ▼
<!-- Credit by Giuseppe Guida 2025 -->
<div class="container">
<a href="#" class="cliccable-box">
<h2>IL TUO TITOLO</h2>
<div class="divider"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a congue magna, ac consequat ex.</p>
<span class="spazio"></span>
</a>
<a href="#" class="cliccable-box">
<h2>IL TUO TITOLO</h2>
<div class="divider"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a congue magna, ac consequat ex. </p>
<span class="spazio"></span>
</a>
<a href="#" class="cliccable-box">
<h2>IL TUO TITOLO</h2>
<div class="divider"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a congue magna, ac consequat ex. </p>
<span class="spazio"></span>
</a>
<a href="#" class="cliccable-box">
<h2>IL TUO TITOLO</h2>
<div class="divider"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a congue magna, ac consequat ex. </p>
<span class="spazio"></span>
</a>
</div>
COPIA IN ESPERTO ▼
/* Contenitore principale by max 2025 */
.container {
display: flex;
flex-wrap: wrap; /* Permette ai box di andare a capo se necessario */
justify-content: center; /* Centra i box orizzontalmente */
gap: 20px; /* Spaziatura tra i box */
}
.cliccable-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 300px; /* Imposta una larghezza fissa più piccola */
padding: 20px;
background-color: #f8f9fa; /* Grigio chiarissimo */
border: 1px solid #ccc;
text-align: center;
cursor: pointer;
text-decoration: none;
color: black;
transition: transform 0.3s ease-in-out, background-color 0.4s ease-in-out, color 0.3s ease-in-out;
border-radius: 5px; /* Angoli arrotondati di 5px */
box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 6px 20px rgba(0,0,0,0.1); /* Ombra leggera */
}
a.cliccable-box .divider {
width: 80px;
height: 5px;
background-color: orange; /* Colore del divisorio */
margin: 10px auto 20px;
position: relative;
z-index: 1;
transition: background-color 0.3s ease;
}
a.cliccable-box:hover .divider {
background-color: yellow; /* Colore del divisorio al passaggio del mouse */
}
a.cliccable-box:hover {
transform: scale(1.02);
color: #333;
border-radius: 5px; /* Angoli arrotondati di 5px anche sull'ombra */
box-shadow: 0 6px 20px rgba(0,0,0,0.2); /* Ombra uniforme più pronunciata al passaggio del mouse */
}
a.cliccable-box h2 {
margin-top: 20px;
font-size: 1.5rem; /* Dimensione del carattere del titolo aumentata */
text-transform: uppercase;
position: relative;
z-index: 1;
}
a.cliccable-box p {
margin-top: 10px;
font-size: 0.95rem; /* Mantiene la dimensione originale della descrizione */
line-height: 1.4;
position: relative;
z-index: 1;
}
.spazio {
display: block;
margin-bottom: 25px; /* Aggiunge 20px di spazio sotto la descrizione */
}
/* Effetto hover con un colore moderno sfumato */
.cliccable-box:hover {
transform: scale(1.01);
background: linear-gradient(135deg, #ff8a00, #da1b60); /* Gradiente arancione-rosso */
color: white;
}
/* Cambia colore al testo e alla linea per contrasto */
.cliccable-box:hover h2,
.cliccable-box:hover p {
color: #fff; /* Testo bianco */
}
.cliccable-box:hover .line {
background-color: #ffe600; /* Giallo acceso per evidenziare */
}
.line {
margin: 20px 0; /* Aumenta lo spazio sopra e sotto la linea */
width: 80px; /* Leggermente più larga */
height: 4px; /* Più sottile e delicata */
background-color: #ff8a00; /* Colore arancione acceso */
border-radius: 2px; /* Angoli arrotondati per un effetto più moderno */
}
/* Margine inferiore per il titolo */
.cliccable-box h2 {
margin-bottom: 10px; /* Aggiungi margine inferiore per distanziare dal divisore */
}
/* Media queries per schermi più piccoli */
@media (max-width: 768px) {
.cliccable-box {
width: 90%; /* Adatta la larghezza al 90% del contenitore */
padding: 15px; /* Riduci il padding se necessario */
}
}
@media (max-width: 480px) {
.cliccable-box {
width: 100%; /* Adatta la larghezza al 100% del contenitore */
padding: 10px; /* Riduci ulteriormente il padding se necessario */
}
}
========
► # QUI ci metti i link delle pagine
► I testi lorem li sostituisci con i tuoi
► Puoi cambiare o aggiungere media query al breack point che vuoi.
Se poi ti volessi sbizzarrire e superare pazientemente il secondo e mezzo come tempo massimo puoi andare sul CSS e cambiarti i colori,l'ombra,l'effetto ecc...ecc.....
Sfondo iniziale → Grigio chiarissimo #f8f9fa
Hover con colore moderno sfumato ► Gradiente arancione-rosso
Testo e linea ben visibili al passaggio del mouse
Questi box si possono fare in tanti modi.
Buon lavoro.