Botones dinámicos con CSS

Esta clase CSS genérica que mos muestra naioo.com, nos permite crear botones de diferente tamaño de manera dinámica, modificando sólo la fuente del texto.

Sólo necesitamos una imagen semitransparente, y agregar la clase, por ejemplo, antes de <:/b:skin>:

.btn {
  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);
}

Eso es lo genérico, ahora, podemos crear efectos con diferentes colores, por ejemplo:

.blue { background-color: #CCC; color: #141414; }
.blue:hover { background-color: #00C0DD; color: #FFF; }
.red { background-color: #CCC; color: #141414; }
.red:hover { background-color: #FF004E; color: #FFF; }

Los usamos así:

<div class="btn blue"> texto </div>
<div class="btn red"> texto </div>

O cambiamos los tamaños con font-size:

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

Anterior

Inicio

Siguiente

Anterior

Inicio

Siguiente

Anterior

Inicio

Siguiente

Anterior

Inicio

Siguiente

Anterior

Inicio

Siguiente