Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


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:


Anterior
Inicio
Siguiente

Anterior
Inicio
Siguiente

Anterior
Inicio
Siguiente

Anterior
Inicio
Siguiente

Anterior
Inicio
Siguiente



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>


Aizum Blog, lunes, noviembre 18, 2013


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9