Diseño web: Crear botones profesionales con CSS3 y HTML5

24 jul 2014

ACTUALIZACIÓN: Si te interesa, puedes ver cómo crear un efecto con CSS3 al botón.

En esta entrada vamos a mostrar cómo crear botones con aspecto profesional para tu página web con CSS3 y HTML5. Para ello utilizaremos la información que ofrecimos en el anterior artículo sobre cómo crear fondos de degradados de color junto a otras propiedades más.

Éste será el resultado:
Botón de ejemplo

En primer lugar, en tu fichero .html debes escribir el enlace del botón:

<!–– HTML ––>
<a class=“boton” href=“http://www.recreacomunicacion.com” title=“Recrea Comunicación”>Botón de ejemplo</a>

Ahora tienes que crear la clase “boton” en tu archivo .css:

/* CSS */
.boton{

background-color: #2dc234;
background-image: -webkit-linear-gradient(rgba(41, 150, 47, .8), rgba(45, 194, 52, .2));
background-image: -moz-linear-gradient(rgba(41, 150, 47, .8), rgba(45, 194, 52, .2));
background-image: -o-linear-gradient(rgba(41, 150, 47, .8), rgba(45, 194, 52, .2));
background-image: linear-gradient(rgba(41, 150, 47, .8), rgba(45, 194, 52, .2));
-ms-border-radius:8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 8px 0 #197b1d, 0 10px 20px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 8px 0 #197b1d, 0 10px 20px rgba(0, 0, 0, .4);
box-shadow: 0 8px 0 #197b1d, 0 10px 20px rgba(0, 0, 0, .4);
color: #fff;
display: inline-block;
font-family: ‘Pacifico’, Arial, sans-serif;
font-size: 30px;
line-height: 1;
padding: 15px 25px;
text-decoration: none;
text-shadow: 0 -1px 1px rgba(25, 123, 29, .7);

}

El botón, como ya habíamos adelantado, tendrá el siguiente estilo:
Botón de ejemplo

ACTUALIZACIÓN: Si te interesa, puedes ver cómo crear un efecto con CSS3 al botón.

 

9 comentarios en “Diseño web: Crear botones profesionales con CSS3 y HTML5”

  1. serna dice:

    Hola Óscar, pega tu código para que lo revise.

  2. catallorqui dice:

    genial el código, gracias por compartirlo, estoy haciendo unas pruebas en un sitio web y queda fantástico, solo he tenido que realizar algunos retoques para el tamaño y una nueva clase para crear botones desactivados.
    Si quieres ver la muestra, este es el sitio, aunque ya te digo que son solo unas primeras pruebas: catarismo, el juego /tutorial

  3. serna dice:

    Hola catallorqui, me alegro de que te haya sido útil. Ánimo con el diseño :)

  4. gera dice:

    .bot10 {
    background:-ms-linear-gradient(top, #70db93 0%, #4e2f2f 100%);
    background-image: -webkit-linear-gradient(top, #3498db 0%, #2bb878 100%);
    background-image: -moz-linear-gradient(top, #3498db 0%, #2bb878 100%);
    background-image: -o-linear-gradient(top, #3498db 0%, #2bb878 100%);
    background-image: linear-gradient(top bottom #3498db 0%, #2bb878 100%);
    -ms-border-radius:10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 8px 0 #197b1d, 0 10px 20px #00ffff;
    -moz-box-shadow: 0 8px 0 #197b1d, 0 10px 20px #ff00ff;
    box-shadow: 0 8px 0 #197b1d, 0 10px 20px #9f5f9f;
    color: #000000;
    display: inline-block;
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1;
    padding: 15px 25px;
    text-decoration: none;
    text-shadow: 0 -1px 1px #b87333;
    }

    .bot10:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e68027), color-stop(1, #44c767));
    background:-moz-linear-gradient(top, #e68027 5%, #44c767 100%);
    background:-webkit-linear-gradient(top, #e68027 5%, #44c767 100%);
    background:-o-linear-gradient(top, #e68027 5%, #44c767 100%);
    background:-ms-linear-gradient(top, #e68027 5%, #44c767 100%);
    background:linear-gradient(top bottom, #e68027 5%, #44c767 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#e68027′, endColorstr=’#44c767′,GradientType=0);
    background-color:#e68027;
    }
    .bot10:active {
    position:relative;
    top:1px;
    }

  5. alex dice:

    solo cambia las comillas por eso te da error

  6. Miguel Angel dice:

    disculpa y para poder hacer el boton mas chico??

    1. Jaime dice:

      Hola Miguel, para poder hacer el botón más pequeño puedes disminuir el tamaño de letra (font-size) y el padding.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>