Cómo crear un completo botón CSS3

viernes, noviembre 12, 2010
COMPARTE EL POST

continuar_leyendoMuchos usuarios me vienen preguntando como es que hice los botones que tengo en la parte inferior de cada post, especialmente el de Continuar leyendo, pues bueno, se trata de un método oculto y secreto de programación…

No, no se crean, la verdad es que esta hecho en CSS3 y bueno, en el siguiente tutorial vamos a ver como configuré el botón, claro, debo aclarar que si ya se dieron cuenta, no funciona bien en Internet Explorer, pero lastima, aún así si sirve en Google Chrome, Safari y Firefox, así que después del salto vamos a ver cómo crear un completo botón CSS3.

Configurando CSS

Lo primero que tenemos que hacer es configurar la materia prima, el alma de nuestro botón, CSS.

#leermas {
    color: #333333;
    text-decoration: none;
    font-weight: bold;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px #999;
    -webkit-box-shadow: 0 1px 3px #999;
    text-shadow: 0 -1px 1px #ccc;
    position: relative;
    cursor: pointer;
    padding-top: 5px;
    padding-right: 7px;
    padding-bottom: 5px;
    padding-left: 7px;
    font-size: 12px;
    border: 1px solid #999999;
    background-color: #FFFFFF;
    background-repeat: repeat-x;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#D6D6D6));
    background: -moz-linear-gradient(top,  #fff#D6D6D6);
    }

Tengo primero que a mi botón le puse #leermas, así que eso tendremos que modificarlo, pero básicamente lo que se tiene que modificar a su gusto son los colores, por ejemplo, el mío en un degradado de un gris y un gris más claro, los valores en negritas tendrán que modificarlos si así quieren.

#leermas:hover{
    TEXT-ALIGN: right;
    PADDING-BOTTOM: 5px;
    BACKGROUND-COLOR: #ffae00;
    PADDING-LEFT: 7px;
    PADDING-RIGHT: 7px;
    COLOR: #ffffff;
    FONT-SIZE: 12px;
    text-shadow: 0 -1px 1px #B06A00;
    TEXT-DECORATION: none;
    PADDING-TOP: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #FF9900;
   
    background-position: center bottom;
    background-repeat: repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#FFAC17), to(#D17B12));
    background: -moz-linear-gradient(top,  #FFAC17#D17B12);
}

Ahora que ya tenemos la apariencia de nuestro botón lista, tenemos que configurar el estado :hover, para que al poner el mouse sobre el botón se ilumine o lo que sea que pase. El código es el mismo, a excepción, claro, de los colores, que es lo que tenemos o podemos modificar en negritas.

Configurando HTML

<a id='leermas'>Continuar leyendo</a>

Por último basta la implementación de HTML, basta con agregar una etiqueta de link con el id que colocaste en el estilo, y listo, tendrás hecho tu botón CSS3.

boton

¡Síguenos en Twitter!


Deja tu comentario