bottone in css senza immagini
visite 500 visualizzazioni

Creare un bel bottone in Css3 senza usare immagini

1 min

Bottone arrotondato in Css

Oggi vedremo come realizzare in pochi semplici passi un bottone dall’aspetto davvero gradevole, senza l’utilizzo di immagini di sfondo, compatibile con tutti i principali browser di navigazione. Spesso infatti nel web design si abusa un pò delle immagini che comportano un appesantimento della pagina e del suo “scaricamento”. Bisogna imparare a farne a meno dunque, quando questo è possibile.

Il codice Html

Dopo aver creato il nostro form, avremo sicuramente bisogno di inserire un tasto submit che ci permetterà di inviare la richiesta specifica all’indirizzo di posta desiderato. Qui di seguito il codice Html del bottone che richiama la CLASSE “btn”. Ovviamente dentro VALUE possiamo metterci ciò che vogliamo, io in questo caso ho inserito un classico “invia”, che apparirà scritto all’interno del pulsante.

Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo
Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo
<input class="btn" value="INVIA" type="submit">

Il codice CSS3

Abbiamo collegato il bottone “invia” alla classe “btn”, ora passiamo al codice CSS che ci permetterà di formattare il bottone come vogliamo, rendendolo esteticamente molto piacevole.

» famiglia di caratteri
» dimensione del carattere
» peso del font
» decorazione, ossia se vogliamo che appaia sottolineato o meno
» colore della scritta
» cursor, ossia la trasformazione della freccia in manina quando si va sul tasto
» padding, ossia quanto la scritta deve staccarsi dal bordo
» bordo del bottone, ossia l’equivalente della traccia nei programmi di grafica
» radius, ossia il raggio di arrotondamento del bottone

.btn { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
font-weight: bold; 
text-decoration: none;
color: #FFFFFF; 
cursor: pointer;
padding: 3px 8px 3px 8px;
background: #0786C5; 
border: 1px solid #0786C5;
-moz-border-radius: 15px; 
-webkit-border-radius: 15px; 
border-radius: 15px }


Articolo a cura di: Del Re Valerio
Dott. in Comunicazione e Pubblicità per le Organizzazioni. Sono l'ideatore del blog Robadagrafici.com e mi occupo di comunicazione visiva, grafica e web, per le aziende.
Se questo articolo ti è piaciuto, fallo sapere ai tuoi amici!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *