Gradient Buttons

Mediante CSS podemos aplicar estilos personificados de los botones de nuestra Web. Hay varias técnicas, la que se va a mencionar en este artículo no utiliza imágenes y los nombres de los botones se pueden cambiar fácilmente.

Para conseguir botones como los de la imagen, se necesita tener conocimientos de técnicas CSS para desarrollar unas clases como las siguientes:

.button {
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0.05em rgba(0, 0, 0, 0.4);
    color: #FFFFFF;
    display: inline-block;
    font: bold 1.5em 'Trebuchet MS',Arial,Helvetica;
    margin: 10px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.button, .button span {
    border-radius: 0.3em 0.3em 0.3em 0.3em;
}
.button span {
    background-size: 3px 3px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    padding: 0.5em 2.5em;
}
.button:hover {
    box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.4);
}
.button:active {
    position: relative;
    top: 1px;
}

Luego creamos un clase para añadir el color y asi poder tener distintos colores como los que veremos en el ejemplo en funcionamiento.

Por ejemplo, para el botón de color azul añadiríamos:

.button-blue {
    background: -moz-linear-gradient(-90deg, #81A8CB, #4477A1) repeat scroll 0 0 transparent;
}
.button-blue:hover {
    background: -moz-linear-gradient(-90deg, #4477A1, #81A8CB) repeat scroll 0 0 transparent;
}
.button-blue:active {
    background: none repeat scroll 0 0 #4477A1;
}

Estas clases las podemos aplicar tanto a los links como a los inputs type=»submit» de nuestros formularios añadiendo en la etiqueta correspondiente el class=»».

Luego en el <body> de nuestra página podría crear un link como este::

<a class="button button-blue" href="#"><span>Button</span></a>

Ver 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!
(1 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. Los campos obligatorios están marcados con *

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

Ver más sobre