Botones Dinámicos con CSS3 que Cambian de Color

Hoy os presento de nuevo una selección de botones dinámicos que cambian de color al hacer hover, los he visto en Nxd Blog y me han encantado gratamente, su diseño y su efecto, por eso, creo que pueden ser de interés, a usuarios de mi blog, que quieran insertar estos botoncitos en su web o blog. Los botones se pueden agrandar o empequeñecer, cambiado el tamaño de la fuente, por eso son muy dinámicos. En el CSS muestra una imagen que tiene una cierta transparencia, y definiciones generales. A continuación puedes ver una demostración de lo que estamos intentado explicar, cómo siempre una demo vale más que mil palabras, lo puedes ver, más abajo, o seguidamente, el diseño y el efecto, en viva acción:
AnteriorInicioSiguiente
AnteriorInicioSiguiente
AnteriorInicioSiguiente
AnteriorInicioSiguiente
AnteriorInicioSiguiente
Sí lo quieres añadir en Blogger el CSS es antes de ]]></b:skin>

.btn-aizum {
  display: inline-block;
  background: transparent url(URL_imagen.png) repeat-x 0 0;
  border: 1px solid rgba(0,0,0,0.4);
  padding: 5px 10px 6px 10px;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
  -moz-border-radius: 15px;
  -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
  -webkit-border-radius: 5px;
  -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
}
.blue { background-color: #ddd; color: #141414; }
.blue:hover { background-color: #00C0DD; color: #FFF; }
.purpura { background-color: #ddd; color:  #141414 !important; }
.purpura:hover { background-color: #8aff00; color: #FFF !important; }
.violeta { background-color: #ddd; color:  #141414 !important; }
.violeta:hover { background-color: #7500ff; color: #FFF !important; }
.red { background-color: #ddd; color: #141414 !important; }
.red:hover { background-color: #FF004E; color: #FFF !important; }
.naranja{ background-color: #ddd; color: #141414 !important; }
.naranja:hover { background-color: #ff7500; color: #FFF !important; }
.turquesa{ background-color: #ddd; color: #141414 !important; }
.turquesa:hover { background-color: #00ff75; color: #FFF !important; }
.rojo{ background-color: #ddd; color: #141414 !important; }
.rojo:hover { background-color: #ff000b; color: #FFF !important; }
.azul{ background-color: #ddd; color: #141414 !important; }
.azul:hover { background-color: #008bff; color: #FFF !important; }
.yellow{ background-color: #ddd; color: #141414 !important; }
.yellow:hover { background-color: #fdee00; color: #FFF !important; }
.tractor{ background-color: #ddd; color: #141414 !important; }
.tractor:hover { background-color: #fd0e35; color: #FFF !important; }

Y lo usamos cada vez que queramos de está manera:

<div class="btn-aizum blue"> texto </div>
<div class="btn-aizum red"> texto </div>
<div class="btn-aizum purpura"> texto </div>
<div class="btn-aizum violeta"> texto </div>
<div class="btn-aizum red"> texto </div>
<div class="btn-aizum naranja"> texto </div>
<div class="btn-aizum turquesa"> texto </div>
<div class="btn-aizum rojo"> texto </div>
<div class="btn-aizum azul"> texto </div>
<div class="btn-aizum yellow"> texto </div>
<div class="btn-aizum tractor"> texto </div>

O cambiamos los tamaños de la fuente de este modo:

<div class="btn-aizum blue" style="font-size: 20px;"> texto </div>
<div class="btn-aizum blue" style="font-size: 36px;"> texto </div>

Get free premium widgets for your blog and website.