02 septiembre 2016

Personalizar botones con CSS en Blogger

En el día de hoy, quiero enseñarles una forma fácil de configurar un estilo propio para darle a los botones que dispongan en su web, sólo añadiendo un pequeño código en la plantilla.


Lo primero que hay que hacer, es dirigirse a Plantilla » Editar HTML y antes de ]]></b:skin> pegar el siguiente código:

.boton1 {
    display: inline-block;
    cursor: pointer;
    color: #232323;
    text-decoration: none;
    font-weight: 600;
    padding: 10px 15px;
    border: 1px solid #CCC;
    background: #F1F1F1;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(#F9F9F9,0),color-stop(#E3E3E3,1));
    background: -webkit-linear-gradient(top, #F9F9F9 0%,#E3E3E3 100%);
    background: -moz-linear-gradient(top, #F9F9F9 0%,#E3E3E3 100%);
    background: -ms-linear-gradient(top, #F9F9F9 0%,#E3E3E3 100%);
    background: -o-linear-gradient(top, #F9F9F9 0%,#E3E3E3 100%);
    background: linear-gradient(top, #F9F9F9 0%,#E3E3E3 100%);
    -webkit-box-shadow: 0 1px rgba(255,255,255,.2) inset;
    -moz-box-shadow: 0 1px rgba(255,255,255,.2) inset;
    box-shadow: 0 1px rgba(255,255,255,.2) inset;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
}
.boton1:hover{
    background: #E3E3E3;
    color: #0079d7;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
}
.boton1.activo, .boton1:active {
    -webkit-box-shadow: inset 0.5px 1px 3px rgba(0, 0, 0, .3);
    -moz-box-shadow: inset 0.5px 1px 3px rgba(0, 0, 0, .3);
    box-shadow: inset 0.5px 1px 3px rgba(0, 0, 0, .3);
}
.boton1.activo {
    background: whiteSmoke;
    color: #0079d7;
}
.boton1:focus{
    outline:0px;
}

Pueden crear cuantos botones necesiten y personalizarlos a su gusto, en este caso sólo ha sido uno, y lo he llamado "boton1". Este estilo puede ser aplicado en botones de formulario e incluso con DIV, por ejemplo:

Código:
<div class="boton1">Soy un botón de prueba</div>

Resultado:

Espero que les haya gustado el tutorial, cualquier duda o sugerencia no duden en dejar un comentario.

¿Que te gustaría aprender a hacer en Blogger?

0 comentarios:

Deja el primer comentario. Para nosotros, tu opinión es muy importante.

Categorías

Diseño web

Facebook

Google+

Suscribirse

Enter your email address:

Delivered by FeedBurner

Gana dinero

Con tecnología de Blogger.
 
Suscribirse al boletín
Regístrate con tu dirección de correo electrónico para recibir noticias y actualizaciones directamente en tu bandeja de entrada