Web e code script visite 62

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.

<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 }

Riproduzione riservata © La riproduzione è concessa solo citando la fonte con link all'articolo. Condividi l'articolo


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.

Lascia un commento

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



Potrebbe anche interessarti

webdesign

Web e code script

NUOVO PROFILO FACEBOOK | I primi passi

3 min Eccoci qui… anche Roba da Grafici ha provato il nuovo profilo…

webdesign

Web e code script

Aprire e chiudere div con jQuery UI Accordion

3 min Capita spesso ai web designer di dover gestire i contenuti in…

webdesign

Web e code script

Come installare Google Analytics

2 min Google Analytics è un servizio di statistiche che ti permette facilmente…