Web e code script visite 12

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

Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo
Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo

.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

Le 4 migliori photogallery lightbox in jQuery

2 min La maggior parte dei siti creati di recente utilizza ormai photogallery…

webdesign

Web e code script

Facebook Like e Send Button in 108 lingue

2 min All’interno di questa pagina potete trovare tutti i plugin per fare…

webdesign

Web e code script

SINTESI ADDITIVA E SOTTRATTIVA | Le differenze

3 min Nelle pagine web i colori si formano attraverso la cosiddetta sintesi…