Creare fantastici pulsanti solo con il css

Creare fantastici pulsanti solo con il css
Jul 28 Scritto da 
Pubblicato in Web Design Blog
Vota questo articolo
(0 Voti)

Ecco come creare dei pulsanti sul vostro sito internet usando solo css. Non servono più complicate immagini per creare il design dei vostri pulsanti!

Fino a non molto tempo fa, tutti i web designer dovevano utilizzare immagini per dare uno stile grafico personalizzato ai bottoni ed ai pulsanti sui loro siti web!

Le tecniche possibile erano 2: creare una sola immagine di sfondo per il pulsante oppure utilizzare due in combinazione!

Con la prima soluzione si evitava di affollare l'HTML con <span> utilizzati ai soli fini grafici, col problema poi di avere dei pulsanti dalle dimensioni fisse. 

<a href="#">Testo del link</a>
a {
display:block; 
width:100px; 
height:50px; 
margin:5px; 
padding: 5px; 
background: url(immagine-di-sfondo) no-repeat scroll 0 0; 
color:#000; 
overflow:hidden; 
text-decoration:none; 
line-height:50px
}

 

La seconda tecnica, invece, consentiva di creare bottoni dalle dimensioni anche molto diverse; in questo caso, però, si dovevano aggiungere elementi Html solo per il design e realizzare immagini composite.

<a href="#"><span>testo del link</span></a>
a  {
display:block; 
height:50px; 
margin-left:5px; 
padding: 5px; 
background: url(immagine-di-sfondo-sinistra) no-repeat scroll  left center; 
color:#000; 
text-decoration:none;
line-height:50px
}

a span {
display:block;
height:40px; 
margin-left:20px; 
margin-right:5px; 
padding: 5px; 
background: url(immagine-di-sfondo-sinistra) no-repeat scroll  right center;
}

 

Oggi tutto questo non serve più!

Il css è, infatti, andato molto avanti e ci dà la possibilità di dare uno stile personalizzato ai link, ottenendo fantatici bottoni, senza dover complicare troppo il codice nè realizzare immagini con Photoshop o con Illustrator!

Il vantaggio, non è solo una maggiore pulizia del codice, ma anche una grande facilità nel fare dei cambiamenti anche radicali alle dimensioni, colori e stile dei nostri pulsanti. Lavorando solo con il css potremmo, infatti, modificare i bottini in tutte le loro parti grafiche!

Ecco un esempio di pulsante realizzato solo con il CSS

testo del link

Creare pulsanti CSS

Iniziamo con il codice html base di un pulsante.

<a class="pulsante" href="/link">testo del link</a>

Non vi servirà altro per visualizzare sulla vostra pagina web qualcosa di simile a questo.

testo del link

Primo passo: sfondo e dimensioni del pulsante

Prima di tutto dobbiamo informare il browser che il nostro link ha dimensioni specifiche e deve essere visualizzato, pertanto come un blocco. Quindi impostiamo i colori per lo sfondo ed il testo, i margini, sia interno che esterno, e lo stile di base del testo!

a.pulsante {
height: 30px; 
width: 150px; 
display: block; 
background-color: #505050; 
color: white; 
text-decoration: none; 
padding: 10px; 
margin: auto;
}

testo del link

Secondo passo: diamo uno stile all'ancor text del link

Il testo risulta troppo piccolo e decentrato rispetto al suo contenitore. Quello che manca è la definizione del font, sia per il carattere da utilizzare che per le dimensioni, ed il posizionamento all'interno del bottone che stiamo creando.

Per il font, abbiamo scelto di non utilizzare quelli standard, ma qelli forniti direttamente dalle ottime librerie di Google Fonts: nel nostro caso useremo il font chiamato Belleza

La posizione orizzontale la impostiamo con text-align="center", mentre quella verticale dando a line-height un valore pari alla metà dell'altezza di tutto il pulsante. Nel nostro caso quindi imposteremo line-height:25px, visto che l'altezza del bottone è 30px più i 10 pixels di padding in alto ed in basso.

Infine, per rendere il testo più visibile gli diamo un po' di grassetto e lo modifichiamo, in modo che tutte le lettere diventino maiuscole, sempre attraverso solo il css.

a.pulsante {
height: 30px; 
width: 150px; 
display: block; 
background-color: #505050; 
color: white; 
text-decoration: none; 
padding: 10px; 
margin: auto; 
line-height: 25px; 
text-align: center; 
font-family: 'Belleza', arial, sans-serif;  
font-weight: bold; 
font-variant: small-caps; 
font-size: 20px;
}

testo del link

Terzo passo: bottone con gli angoli arrotondati

Con l'introduzione del css3 è stata codificata definitivamente la proprietà border-radius, che ci permette di arrotondare gli angoli di un qualunque elemento html. Purtroppo però, ancora in molti fanno uso di browser vecchi, che, non riescono ad interpretare la nostra istruzione.

La soluzione è fare ricorso ai diversi standard proprietari di ogni produttore di browser: per Firefox useremo -moz-border-radius, mentre per Chrome e Safari -webkit-border-radius. Purtroppo Explorer ha aggiunto il supporto per border-radius solo nella versione 9, mentre le precedenti versioni non sono in grado di arrotondare gli angoli. Esiste comunque uno script che consente di far interpretare correttamente anche alle vecchi versione di Internet Explorer: lo ho testato e riesce a risolvere qualche problema, anche se purtroppo dovrete lavorare molto per ottenere effetti simili. In ogni caso, per chi volesse il link è questo fetchak.com/ie-css3/

Per mantenere la compatibilità anche con le vecchie versioni di Internet Explorer consiglio in ogni caso di creare un foglio di stile alternativo, dove usare ancora le vecchie immagini!

Scegliamo di arrotondare tutti gli angoli di 15 pixels:

a.pulsante {
height: 30px; 
width: 150px; 
display: block; 
background-color: #505050; 
color: white; 
text-decoration: none; 
padding: 10px; 
margin: auto; 
line-height: 25px; 
text-align: center; 
font-family: 'Belleza', arial, sans-serif;  
font-weight: bold; 
font-variant: small-caps; 
font-size: 20px; 
border-radius: 15px; 
-webkit-border-radius: 15px; 
-moz-border-radius: 15px;
}

testo del link

Quarto passo: effetto 3D, bordi ed ombreggiature 

A questo punto al nostro pulsante manca solo il bordo. L'effetto che vogliamo ottenere è una sorta di cordoncino in rilevo, che giri tutto attorno al bottone.

La proprietà css che useremo è box-shadow: di solito si usa solo per creare una ombreggiatura al di sotto di un elemento html, ma può essere utilizzato anche in modo più creativo.

Analizziamo per un attimo il suo utilizzo, partendo da un esempio, box-shadow: 1px 1px 3px #000000: come vedete prende 4 parametri.

La posizione dell'ombra è gestita dai primi due parametri: il primo misura lo spostamento in orizzontale, mentre il secondo quello in verticale ed entrambi accettano anche valori negativi. Con il terzo parametro controlliamo la sfumatura: maggiore sarà la dimensione è più l'ombra sarà grande e sfumata. L'ultimo parametro, infine, è il colore: nel caso in questione è un bel nero (#000000) pieno, ma potremmo anche impostarne la trasparenza, modificandolo in rgba(0,0,0,0.5), dove 0.5 è l'opacità del colore, con valori da 0 (trasparente) a 1 (opaco).

Fino a qui, era l'uso standard di box-shadow. Ma in pochi sanno, che box-shadow accetta più quartine di valori, e può creare effetti anche molto complessi.

Prima di impostare i valori, ragioniamo bene su quello che vogliamo fare, e sull'effetto di illuminazione da dare. Pensiamo ad una fonte di luce in alto a sinistra rispetto ad elemento in rilievo, ed a come quest'ultimo sarebbe illuminato. Essendo in rilievo, i lati esposti alla luce dovrebbero essere un po' più chiari, mentre i lati opposti saranno in ombra, e quindi più scuri!

Tradotto in css dovremmo riuscire a creare una sfumatura che va dall'angolo in alto a sinistra verso quello in basso a destra. Per farlo iniziamo ad impostare più quartine di valori per box shadow:

box-shadow: 3px 3px 1px #C4C4C4,3px -3px 1px rgba(136, 136, 136, 0.7), -3px 3px 1px #BBB, -3px -3px 1px #888;

testo del link

Il bordo e grigio, con una larghezza di 3px ed una sfumatura appena accennata: con la prima quartina controlliamo l'ombra nell'angolo in basso a destra, un grigio chiaro; la seconda si occupa invece nell'angolo in alto a destra. Notate il colore con una leggera trasparenza, per dare un effetto sfumato. La terza mostra il bordo nell'angolo in basso a sinistra. L'ultima, infine, genera il cordoncino in alto a sinistra, un po' più scuro di tutti gli altri!

Manca però l'effetto tridimensionale, che otterremo aggiungendo un effetto di illuminazione più netto al box-shadow:

box-shadow: 1px 1px 1px white, -1px -1px 1px black, 3px 3px 1px #C4C4C4,3px -3px 1px rgba(136, 136, 136, 0.7), -3px 3px 1px #BBB, -3px -3px 1px #888;

testo del link

Come è facile notare abbiamo semplicemente aggiunto un sottile bordo bianco nella parte illuminata, ed uno nero nella parte in ombra. Il nostro pulsante ora ha un bell'effetto tridimensionale!

Con un'ultima modifica aggiungiamo un po' di ombreggiatura tutto attorno al pulsante, per esaltarlo rispetto allo sfondo grigio del sito.

box-shadow: 1px 1px 1px white, -1px -1px 1px black, 3px 3px 1px #C4C4C4,3px -3px 1px rgba(136, 136, 136, 0.7), -3px 3px 1px #BBB, -3px -3px 1px #888, 0px 0px 15px black;

testo del link

Anche in questo caso i vecchi browser potrebbero non interpretare correttamente le istruzioni: usate anche -moz-box-shadow e -webkit-box-shadow con gli stessi valori per mantenere  la compatibilità con quanti più browser possibili!

Pulsante CSS: il codice finale

Riassumendo ecco il codice finale per iniziare a creare pulsanti solo con il css. Giocate tranquillamente con colori e dimensioni per scoprire altri fantastici effetti

<a class="pulsante" href="/link">testo del link</a>
a.pulsante {
height: 30px; 
width: 150px; 
display: block; 
background-color: #505050; 
color: white; 
text-decoration: none; 
padding: 10px; 
margin: auto; 
line-height: 25px; 
text-align: center; 
font-family: 'Belleza', arial, sans-serif; 
font-weight: bold; 
font-variant: small-caps; 
font-size: 20px; 
border-radius: 15px; 
-webkit-border-radius: 15px; 
-moz-border-radius: 15px; 
box-shadow: 1px 1px 1px white, -1px -1px 1px black, 3px 3px 1px #C4C4C4,3px -3px 1px rgba(136, 136, 136, 0.7), -3px 3px 1px #BBB, -3px -3px 1px #888, 0px 0px 15px black;
-webkit-box-shadow: 1px 1px 1px white, -1px -1px 1px black, 3px 3px 1px #C4C4C4,3px -3px 1px rgba(136, 136, 136, 0.7), -3px 3px 1px #BBB, -3px -3px 1px #888, 0px 0px 15px black;
-moz-box-shadow: 1px 1px 1px white, -1px -1px 1px black, 3px 3px 1px #C4C4C4,3px -3px 1px rgba(136, 136, 136, 0.7), -3px 3px 1px #BBB, -3px -3px 1px #888, 0px 0px 15px black;
}
209202 Ultima modifica il Martedì, 07 Aprile 2015
ProgettoWebFirenze

Da ormai oltre 10 anni combatto al fianco dei clienti la dura battaglia per l'indicizzazione dei loro siti web.

Dopo studi di economia e marketing, ho lavorato per qualche tempo presso una agenzia SEO di New York dove ho appreso i primi segreti, gioito per i primi successi e imparato dai primi fallimenti

Oggi, a distanza di qualche anno, ho fondato ProgettoWebFirenze, agenzia di produzione e indicizzazione di siti web a Firenze: tra sviluppatori, grafici, SEO e commerciali siamo ormai in molti e continuiamo a crescere.

Questo è il mio (nostro) blog dove raccogliamo notizie, consigli pareri e qualche sciocchezza sul argomenti come il web design, la SEO ed il web marketing in generale.

Lascia un commento

Assicurati di aver digitato tutte le informazioni richieste, evidenziate da un asterisco (*). Non è consentito codice HTML.

Vuoi avere informazioni? Lasciaci il tuo contatto.

Veniamo noi da te!

Riempi tutti i campi
Grazie, ti richiameremo appena possibile
* Le tue informazioni personali sono protette. Leggi la nostra Privacy Policy per maggiori informazioni

logo bianco

Agenzia web per la creazione di siti internet a Firenze.

Se hai bisogno di maggiori informazioni sui nostri servizi web, sui nostri piani di gestione di web marketing e su tutto quello che facciamo, contattaci quando vuoi e saremmo ben lieti di dare una risposta a tutte le tue domande.

Ma per cortesia, evita di copiare i nostri contenuti creativi: sono stati reati nel tempo con fatica e passione. Se hai una agenzia web tutta tua e stai cercando ispirazione contattaci e saremmo ben lieti di aiutarti. Ma non copiare. Il copyright è una cosa seria.