Los botones son uno de los recursos más útiles en el ámbito web, tanto para el administrador como para el visitante, ya que es un indicativo fácil de entender y nos dice que el elemento es clickeable. En esta ocasión y en respuesta a un pedido, he diseñado unos botones solo con css y personalizables.
Instalación
El siguiente código css debes incluirlo entre tus estilos, por ejemplo en Wordpress los puedes incluir en el archivo style.css al final de todo el documento. En el caso de Blogger ve a Temas > Personalizar > Opciones avanzadas > CSS Personalizado y pega los estilos:
/*!
* Image Buttons v1.2.0
* by zkreations
*/.imgbtn{display:inline-block;font-size:12px;padding:1.2em calc(50px + 1.2em) 1.2em 1.2em;border-radius:4px;position:relative;background-color:#263238;color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 1px 2px 0 rgba(0,0,0,.5);margin:5px;overflow:hidden;background-size:cover;background-repeat:no-repeat;background-position:center}@media (min-width:560px){.imgbtn{font-size:14px}}@media (min-width:768px){.imgbtn{font-size:16px}}.imgbtn::after,.imgbtn::before{position:absolute;right:0;top:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;width:50px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.imgbtn::before{font-size:18px;z-index:5}@media (min-width:560px){.imgbtn::before{font-size:20px}}@media (min-width:768px){.imgbtn::before{font-size:22px}}.imgbtn::after{background-color:#00BCD4;content:""}.imgbtn:active,.imgbtn:focus,.imgbtn:hover{text-decoration:none!important;color:#fff!important}.imgbtn--small{font-size:12px}.imgbtn--large{font-size:20px}.imgbtn--xlarge{font-size:20px;padding:1.2em 1.2em calc(50px + 1.2em)}.imgbtn--xlarge::after,.imgbtn--xlarge::before{height:50px;width:100%;bottom:0;top:auto}.imgbtn--amber,.imgbtn--cyan,.imgbtn--green,.imgbtn--indigo,.imgbtn--purple,.imgbtn--red,.imgbtn--teal{border-width:2px;border-style:solid}.imgbtn--cyan{background-color:#224851;border-color:#00BCD4}.imgbtn--red{background-color:#532f30;border-color:#f44336}.imgbtn--red::after{background-color:#F44336}.imgbtn--green{background-color:#3e4935;border-color:#8bc34a}.imgbtn--green::after{background-color:#8BC34A}.imgbtn--amber{background-color:#554927;border-color:#ffc107}.imgbtn--amber::after{background-color:#FFC107}.imgbtn--purple{background-color:#362d4b;border-color:#673AB7}.imgbtn--purple::after{background-color:#673AB7}.imgbtn--indigo{border-color:#3f51b5;background-color:#2e324a}.imgbtn--indigo::after{background-color:#3f51b5}.imgbtn--teal{border-color:#009688;background-color:#224041}.imgbtn--teal::after{background-color:#009688}@-webkit-keyframes shake{from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,70%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}40%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}}@keyframes shake{from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,70%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}40%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}}.imgbtn--shake:hover::before{-webkit-animation:shake 1s;animation:shake 1s}@-webkit-keyframes rubber{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.5,1.25,1);transform:scale3d(.5,1.25,1)}50%{-webkit-transform:scale3d(1.2,.85,1);transform:scale3d(1.2,.85,1)}65%{-webkit-transform:scale3d(.9,1.05,1);transform:scale3d(.9,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}@keyframes rubber{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.5,1.25,1);transform:scale3d(.5,1.25,1)}50%{-webkit-transform:scale3d(1.2,.85,1);transform:scale3d(1.2,.85,1)}65%{-webkit-transform:scale3d(.9,1.05,1);transform:scale3d(.9,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}.imgbtn--rubber:hover::before{-webkit-animation:rubber 1s;animation:rubber 1s}@-webkit-keyframes rotate{from{-webkit-transform-origin:center;transform-origin:center}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,360deg);transform:rotate3d(0,0,1,360deg)}}@keyframes rotate{from{-webkit-transform-origin:center;transform-origin:center}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,360deg);transform:rotate3d(0,0,1,360deg)}}.imgbtn--rotate:hover::before{-webkit-animation:rotate 1s;animation:rotate 1s}@-webkit-keyframes flip{from{-webkit-transform:rotate3d(0,1,0,-360deg);transform:rotate3d(0,1,0,-360deg)}40%{-webkit-transform:rotate3d(0,1,0,-190deg);transform:rotate3d(0,1,0,-190deg)}50%{-webkit-transform:rotate3d(0,1,0,-170deg);transform:rotate3d(0,1,0,-170deg)}to{-webkit-transform:rotate3d(0,1,0,0deg);transform:rotate3d(0,1,0,0deg)}}@keyframes flip{from{-webkit-transform:rotate3d(0,1,0,-360deg);transform:rotate3d(0,1,0,-360deg)}40%{-webkit-transform:rotate3d(0,1,0,-190deg);transform:rotate3d(0,1,0,-190deg)}50%{-webkit-transform:rotate3d(0,1,0,-170deg);transform:rotate3d(0,1,0,-170deg)}to{-webkit-transform:rotate3d(0,1,0,0deg);transform:rotate3d(0,1,0,0deg)}}.imgbtn--flip:hover::before{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation:flip 1s;animation:flip 1s}
.imgbtn[style]{font-weight:700}
Da clic en "Aplicar" para guardar los cambios. Por último, vamos a dirigirnos a Temas > Editar HTML y abajo de
<head> pegamos el siguiente código el cual corresponde a los iconos:<link href="//cdn.rawgit.com/Zero20659/zerohost/master/dist/fonts/daicons-buttons/style.css" rel="stylesheet"/>
Presiona en "Guardar" y listo, ya tenemos los botones instalados correctamente.
Uso básico
Estructura - Para empezar necesitamos una etiqueta
<a href="#"></a> con la class imgbtn y la class del icono daicon-{nameIcon}, donde {nameIcon} se reemplaza por el nombre del icono, pueden elegir entre los siguientes:daicon-download | Descarga | |
daicon-download-alt | Descarga alternativa | |
daicon-upload | Subir | |
daicon-upload-alt | Subir alternativo | |
daicon-cloud | Subir a la nube | |
daicon-open | Nueva pestaña | |
daicon-link | Abrir enlace | |
daicon-lock | Bloqueado | |
daicon-clip | Documento | |
daicon-folder | Carpeta | |
daicon-print | Imprimir | |
daicon-zip | Archivo ZIP | |
daicon-rar | Archivo RAR | |
daicon-buy | Comprar | |
daicon-paypal | Pagar con Paypal |
Una vez agregado, el código resultante sería el siguiente:
<a class="imgbtn daicon-open" href="#url">Boton base</a>
Colores - Puedes cambiar el aspecto base del boton agregando la class
imgbtn--{nameColor} en donde {nameColor} se reemplaza por el color, puedes elegir entre cyan, red, green, amber, purple, indigo y teal.<a class="imgbtn imgbtn--teal daicon-open" href="#url">Boton Color</a>
Animación - Al igual que como pasa con los colores, podemos agregar una animación mediante la class
imgbtn--{nameFrame} en donde {nameFrame} se reemplaza por el nombre de la animación, pueden elegir entre flip, rotate, rubber y shake.<a class="imgbtn imgbtn--rubber daicon-open" href="#url">Boton Animacion</a>
Imágenes - Para agregar una imagen utilizaremos estilos en línea:
style="background-image: url(imagen.jpg)" en donde imagen.jpg se reemplaza por la url de la foto que pretendas usar, ejemplo:<a class="imgbtn daicon-open" style="background-image: url(https://i.imgur.com/NE77sBe.jpg)" href="#url">Boton Imagen</a>
Tamaño - Se especifica mediante la class
imgbtn--{nameSize} en donde {nameSize} se reemplaza por small, large o xlarge. Si no se especifica, el botón tendrá un tamaño por defecto escalable.<a class="imgbtn imgbtn--xlarge daicon-open" href="#url">Extra Grande</a>
Combinado
Ya que conocemos cada modificador del botón por separado, también podemos fusionarlos todos e ir realizando diferentes combinaciones, por ejemplo:
<a class="imgbtn imgbtn--green imgbtn--shake daicon-download" style="background-image: url(https://i.imgur.com/sgHK2xZ.jpg)" href="#url">Botón Combinado</a>
Eso es todo por ahora amigos, espero que les haya gustado este aporte.
