Creare e scaricare bottoni animati con CSS3

Oggi voglio mostrarvi come creare pulsanti web animati con l’uso solo di CSS3. Buon divertimento.

Il codice Html

Assegnamo la classe .button con il corrispettivo colore, come nel codice qui sotto riportato:

Big Button
Big Button
Big Button
Big Button

Ho costruito 4 classi per i colori che ho scelto e la grandezza; aggiungo altre classi relative alla grandezza dei bottoni che voglio realizzare. Come nell’esempio:

Medium Button

Medium Buttom

......

Ecco quello che vogliamo ottenere:

Quindi andiamo a costruire il CSS3 per rendere tutto questo reale. Il codice che permette l’animazione del bottone l’ho inserita in buttons.css.

Ecco il buttons.css:

.button{
    font:15px Calibri, Arial, sans-serif;

    /* A semi-transparent text shadow */
    text-shadow:1px 1px 0 rgba(255,255,255,0.4);

    /* Overriding the default underline styling of the links */
    text-decoration:none !important;
    white-space:nowrap;

    display:inline-block;
    vertical-align:baseline;
    position:relative;
    cursor:pointer;
    padding:10px 20px;

    background-repeat:no-repeat;

    /* The following two rules are fallbacks, in case
       the browser does not support multiple backgrounds. */

    background-position:bottom left;
    background-image:url('button_bg.png');

    /* CSS3 background positioning property with multiple values. The background
       images themselves are defined in the individual color classes */

    background-position:bottom left, top right, 0 0, 0 0;
    background-clip:border-box;

    /* Applying a default border radius of 8px */

    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;

    /* A 1px highlight inside of the button */

    -moz-box-shadow:0 0 1px #fff inset;
    -webkit-box-shadow:0 0 1px #fff inset;
    box-shadow:0 0 1px #fff inset;

    /* Animating the background positions with CSS3 */
    /* Currently works only in Safari/Chrome */

    -webkit-transition:background-position 1s;
    -moz-transition:background-position 1s;
    -o-transition:background-position 1s;
    transition:background-position 1s;
}

.button:hover{

    /* The first rule is a fallback, in case the browser
       does not support multiple backgrounds
    */

    background-position:top left;
    background-position:top left, bottom right, 0 0, 0 0;
}

Il button_bg.png e’ l’immagine che contiene le bolle di sottofondo. L’effetto del movimento viene dato dalla visualizzazione di due immagini sfruttando l’effetto transizione di CSS3. Adesso andiamo a inserire le dimensioni giuste per ogni pulsante:

/* The three buttons sizes */

.button.big        { font-size:30px;}
.button.medium    { font-size:18px;}
.button.small    { font-size:13px;}

/* A more rounded button */

.button.rounded{
    -moz-border-radius:4em;
    -webkit-border-radius:4em;
    border-radius:4em;
}

Qui ci sono le tre classi per dimensioni: grande, media e piccola e la classe per i bottoni con gli angoli arrotondati.

Adesso diamo un’occhiata hai diversi colori:

/* BlueButton */

.blue.button{
	color:#0f4b6d !important;

	border:1px solid #84acc3 !important;

	/* A fallback background color */
	background-color: #48b5f2;

	/* Specifying a version with gradients according to */

	background-image:	url('button_bg.png'), url('button_bg.png'),
						-moz-radial-gradient(	center bottom, circle,
												rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
						-moz-linear-gradient(#4fbbf7, #3faeeb);

	background-image:	url('button_bg.png'), url('button_bg.png'),
						-webkit-gradient(	radial, 50% 100%, 0, 50% 100%, 100,
											from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
						-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}

.blue.button:hover{
	background-color:#63c7fe;

	background-image:	url('button_bg.png'), url('button_bg.png'),
						-moz-radial-gradient(	center bottom, circle,
												rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
						-moz-linear-gradient(#63c7fe, #58bef7);

	background-image:	url('button_bg.png'), url('button_bg.png'),
						-webkit-gradient(	radial, 50% 100%, 0, 50% 100%, 100,
											from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
						-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}

Ho inserito come parte di codice solo quella relativa ai pulsanti in blu perche’ per gli altri colori e’ la medesima cosa, solo va cambiato il codice colore; comunque se scaricate il file trovate il codice completo.

Si noti che ho usato la proprieta’ background per aggiungere piu’ immagini al pulsante. Praticamente il bottone ha una sorta di strati di colore uno sopra l’altro.

Questo e’ tutto. Potete cambiare i colori semplicemente andando a cambiare il codice colore su buttons.css.

Alla prossima!