Creare un pulsante in stile WEB 2.0 con i CSS

Qui il Live Demo e qui il Codice Sorgente

Con questo tutorial presentiamo un pulsante in stile Web 2.0. Il design, come prassi, è minimale e pulito con l’utilizzo di bordi arrotondati e colori sfumati. In questo esempio presenta un testo evidenziato e uno descrittivo. L’utilizzo di questa componente è particolarmente adatta per le offerte.

Per prima cosa andiamo ad inserire un div usato come pulsante utilizzando l’attributo onclick per far eseguire il javascript location.href=’link.html’ per cambiare pagina:

<div class="pulsante" onclick="location.href='link.html'">
   <h1 class="pulsante">Pulsante WEB 2.0</h1>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Cras et enim at orci molestie faucibus at ut diam.
<div>

Il CSS relativo alla classe pulsante:

div.pulsante
{
  /* impostiamo i bordi arrotondati per i vari browser*/
  -moz-border-radius: 2em;
  -webkit-border-radius: 2em;
  border-radius: 2em;
 
  background: #65a9d7;
 
  /* impostiamo i gradienti per i vari browser */
  background: -webkit-gradient(linear, left top, left bottom, from(#3e77ff), to(#65a9d7));
  background: -webkit-linear-gradient(top, #3e77ff, #65a9d7);
  background: -moz-linear-gradient(top, #3e77ff, #65a9d7);
  background: -ms-linear-gradient(top, #3e77ff, #65a9d7);
  background: -o-linear-gradient(top, #3e77ff, #65a9d7);
 
  /* impostiamo le ombre per i vari browser */
  box-shadow: 0.3em 0.3em 0.3em rgba(0,0,0,0.3);
  -moz-box-shadow: 0.3em 0.3em 0.3em rgba(0,0,0,0.3);
  -webkit-box-shadow: 0.3em 0.3em 0.3em rgba(0,0,0,0.3);
 
  /* impostiamo le dimensioni e le spaziature del pulsante */
  margin: 1em;
  padding: 1em;
  height: 11em;
  width: 11em;
 
  /* se il testo contenuto nel div sborda viene nascosto */
  overflow: hidden;
 
  /* colore del testo*/
  color: #fff;
 
  /* testo centrato e con ombreggiatura */
  text-align: center;
  text-shadow: 0.05em 0.1em 0.05em rgba(0,0,0,0.75);
 
  /* definizione del bordo */
  border-style: solid;
  border-width: 1em;
  border-color: #5e97ff;
 
}

Ora andiamo a definire l’hover del pulsante, ovvero lo stile di quando il mouse entra in contatto con l’oggetto. Il codice sarà pressoché identico al precedente, cambieranno i colori del gradiente che saranno invertiti ed è stato aggiunto il campo cursor che indica al browser di trasformare il puntatore nella manina che indica i link.

div.pulsante:hover
{
  -moz-border-radius: 2em;
  -webkit-border-radius: 2em;
  border-radius: 2em;
 
  background: #65a9d7;
 
  /* come prima ma invertiamo i colori */
  background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e77ff));
  background: -webkit-linear-gradient(top, #65a9d7, #3e77ff);
  background: -moz-linear-gradient(top, #65a9d7, #3e77ff);
  background: -ms-linear-gradient(top, #65a9d7, #3e77ff);
  background: -o-linear-gradient(top, #65a9d7, #3e77ff);
 
  box-shadow: 0.3em 0.3em 0.3em rgba(0,0,0,0.3);
  -moz-box-shadow: 0.3em 0.3em 0.3em rgba(0,0,0,0.3);
  -webkit-box-shadow: 0.3em 0.3em 0.3em rgba(0,0,0,0.3);
 
  margin: 1em;
  padding: 1em;
  height: 11em;
  width: 11em;
 
  overflow: hidden;
 
  /* impostiamo il puntatore affinché appaia la "manina" */
  cursor: pointer;
 
  color: #fff;
 
  text-align: center;
  text-shadow: 0.05em 0.1em 0.05em rgba(0,0,0,0.75);
 
  border-style: solid;
  border-width: 1em;
  border-color: #5e97ff;
}

Infine andiamo a definire il titolo del pulsante

h1.pulsante
{
   font-size: 1.4em;
   text-shadow: 0.1em 0.1em 0.1em rgba(0,0,0,0.75); 
}

Qui il Live Demo e qui il Codice Sorgente

Taggato con: , , , , , , , ,
0 comments on “Creare un pulsante in stile WEB 2.0 con i CSS
1 Pings/Trackbacks per "Creare un pulsante in stile WEB 2.0 con i CSS"
  1. […] a tutti, vi segnalo una guida scritta da me per creare dei pulsanti per offerte in stile Web 2.0 http://francescopasetto.com/2012/06/…nte-con-i-css/ Fatemi sapere cosa ne pensate Rispondi […]

Lascia un commento

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

*