Image Buttons, Botones personalizables con CSS

Botones personalizables con CSS Botones personalizables con CSS

Demostración Gist

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 y si fue asi, no olvides compartir, eso me ayudaría mucho y ayudaras a mas personas que estén buscando lo mismo. Si tienes alguna duda coméntala, respondo a todos.

Quizás te interese