Botones interesantes con CSS3

En este artículo vamos a ver como crear unos botones interesantes y llamativos para nuestra Web empleando para ello CSS3 y sin imágenes extra.

El HTML necesario que deberemos incorporar en nuestro <body> será el siguiente:

<div class="button"><a href="#">click me</a></div>

Y en la hoja de estilos incluimos la siguiente clase:

.button a {
    background-color: #49AFCD;
    background-image: -moz-linear-gradient(center top , #5BC0DE, #2F96B4);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 20px rgba(255, 255, 255, 0.12) inset, 0 -10px 30px rgba(0, 0, 0, 0.12) inset;
    color: white;
    display: block;
    float: left;
    font-size: 15px;
    margin-top: 20px;
    padding: 10px 5px;
    text-align: center;
    text-decoration: none;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.45);
    width: 150px;
}
.button a:hover {
    background-color: #2F96B4 !important;
    background-image: -moz-linear-gradient(center top , #2F96B4, #2F96B4);
}

Ver el ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(3 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre