Button Maker: Ayuda para crear botones con CSS

Button Maker es muy simple de usar. Permite que creemos botones con estilo, usando una serie de opciones que, al ir cambiando, podemos ver en una previsualización instantánea lo que lo hace muy intuitivo y fácil de manejar.

Una vez que nos hemos decidido, basta hacer click en el mismo botón generado para que nos de las definiciones CSS necesarias; por ejemplo:

.button {
  background: #384954;
  background: -webkit-gradient(linear, left top, left bottom, from(#93BDD9), to(#384954));
  background: -moz-linear-gradient(top, #93BDD9, #384954);
  border-top: 1px solid #96D1F8;
  color: white;
  font-size: 20px;
  font-family: Helvetica, Arial, Sans-Serif;
  padding: 13px 26px;
  text-decoration: none;
  vertical-align: middle; 
  -moz-border-radius: 14px;
  -webkit-border-radius: 14px;
  border-radius: 14px;
  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
  box-shadow: rgba(0,0,0,1) 0 1px 0;
  text-shadow: rgba(0,0,0,.4) 0 1px 0;
}
.button:hover {
  background: #28597A;
  border-top-color: #28597A;
  color: #bab337;
}
.button:active {
  background: #719BB8;
  border-top-color: #719BB8;
}

ejemplo

Simplemente son tres definiciones de clases CSS que podemos agregar en cualquier parte, ya sea entre <b:skin> y </b:skin> o bien entre etiquetas <style> y </style>

Por supuesto, podemos cambiarle el nombre y en lugar de llamarlas button ponerle cualquier otro, editarlo y modificar los detalle o basarnos en ese modelo para crear otros.

Para utilizarlos, basta agregar el atributo class en la etiqueta de un enlace:

<a href="una_URL" class="button">, texto del enlace <,/a>,

Como muchas plantillas tienen definiciones de estilo que afectan a TODOS los enlaces o a los enlaces de una sección del blog, a veces es necesario reforzar la definición y para eso agregamos la palabra !important; por ejemplo:

color: white !important;
font-size: 20px !important;

Es una pena que se sigan olvidando que Internet Explorer existe y que algunas de esas propiedades pueden ser utilizadas con limitaciones. En este caso, usando filtros:

.button {
  background: #384954;
  background: -webkit-gradient(linear, left top, left bottom, from(#93BDD9), to(#384954));
  background: -moz-linear-gradient(top, #93BDD9, #384954);
  border-top: 1px solid #96D1F8;
  color: white;
  display: block;
  font-size: 20px;
  font-family: Helvetica, Arial, Sans-Serif;
  height: 50px;
  line-height: 50px;
  position: relative;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  width: 125px; 
  -moz-border-radius: 14px;
  -webkit-border-radius: 14px;
  border-radius: 14px;
  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
  box-shadow: rgba(0,0,0,1) 0 1px 0;
  text-shadow: rgba(0,0,0,.4) 0 1px 0;
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF93BDD9', EndColorStr='#FF384954');
}
.button:hover {
  background: #28597A;
  border-top-color: #28597A;
  color: #bab337;
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#0093BDD9', EndColorStr='#00384954');
}
.button:active {
  background: #719BB8;
  border-top-color: #719BB8;
}

versión IE

REFERENCIAS:Gem@ Blog