IMG Buttons - Botones personalizables en css

min highlight

Demostración Gist

Continuando con los pedidos, en esta ocasión son unos botones que puedan contener imágenes anime, se que es un pedido algo extraño pero visualmente considero que me quedaron bonitos. Así que espero que les gusten, ya saben que pueden hacer sus pedidos usando el formulario.


Ademas de responder las especificaciones del pedido, incluí iconos en fuentes y pequeñas animaciones. Para mayor personalización diseñe varios estilos en colores.


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, claro sin las etiquetas html <style></style>. En el caso de Blogger busca </head> y arriba de eso pega los estilos:


<!-- IMG Buttons -->
<style type='text/css'>/*<![CDATA[*/

/*fontastic*/
[class*=" icon-"]:before,[class^=icon-]:before,[data-icon]:before{font-family:animated-buttons!important;font-style:normal!important;font-weight:400!important;font-variant:normal!important;text-transform:none!important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:[email protected]{font-family:animated-buttons;src:url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAc4AAsAAAAACfAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABCAAABAEAAASyihZ4J0ZGVE0AAAUMAAAAGgAAABx2tSgiR0RFRgAABSgAAAAdAAAAIAA0AARPUy8yAAAFSAAAAEcAAABgUB1er2NtYXAAAAWQAAAATQAAAVgCjQanaGVhZAAABeAAAAApAAAANguVxk9oaGVhAAAGDAAAABgAAAAkBC8CA2htdHgAAAYkAAAAEgAAABIEAwBkbWF4cAAABjgAAAAGAAAABgAHUABuYW1lAAAGQAAAAOgAAAHyDHIgHnBvc3QAAAcoAAAAEAAAACAAAwABeJxlkk1sG0UUx3cT7+7Ishwn6rYEhbUa9YSIFXEopYJDeygFKoqgIgkHiO1Esd3UDm4SxyHJ7tqN493n9cf6Y5OoIR+YhpY0BZI0kJYKISgpUIEoB8Shh/TMicOsNAdYYwFSmCfNvJn3fv/3RjM0ZbNRNE03e8PBC97h/r4O38jwcCR8kaIbKJo6YR5uMNsbzcdsGQcNjkZw2AQ71fp6y58A/zoOTgWzbJaYNmqjqY2iXG3Ul81t1mJbaaFQTYah7JSTaqF46gmqg3rePxgc8g9GRvoiQ/3hwWD4/HhwqC8SCw9GvH37+/hfXxRFz9BpWqFVGugMxdX0G6gibafHGg42vtH4k9PsNjv5TS+84PMhEiADjLf3nBT5EEWroTUm+n7582oV4QE8wFy7dj22FrweGn43PoaIh3RcuIo7sIfJaoqqFybmY+W0gsiApSBJ6dFcGq2F5ifKMlNMXi1cuVLXqFZhI1pFZ3eZaNUP0ejfFS2dWmxr80fY9CGn+dT3PPmF7dEDP8Bn8MXHGzsFVOEe/fxgT7gP3/hXzqDyO8zd5K0ueBWd8p9+RSA2fJoHmN29WR3f8a2+CS9DVxe8BHI2oSVQ8XyoyAT08EUIofByz4qA77FbH9z9dKP/I697IsOOJ/qVsYhV1mN6eeJlJ0BMyXJCTokwhYiPg8m8WJbLspGaA4S97BwY+bI18gbMWXsO5lKGFS6L+UlApGQjXmwZS3aJh+8mHham8mJFLktGatbiPXeIB3tYpwmmizdEiIsiIk2kiRHFOEgGGl3ELuw69pC4iCu2yIgGLBgGss6amIqxAIaIjpB7/GKM2c+KhuVbWf8QNd+oE4uxmtrDY8zSH7xY2R+uSBCXLCHXf0048SN8i68Uk5Kb2DkpmZAEcpuVE6WKG9u5SqlYFrCDPM4vcRlFUwQvbD9gMpAB9zynKRlVOMkqqqq4RzlrowmfwFsnGVBVABVNcYpmHf3KalpGc+8cxLY6MVwniK2OrLCZWvz327yu58pgQCVVuVRI6nLWeh2Q1KRqpauWHmmsCWYsQMtYwI08V3ueYhGFNnm9qEjydEpyz6yy+AQ+xa8H34vBKCKr3NuBQK9AZLZ3YH3b/d3GGW7kcnxZwDK7tLCw7MYlzkocE87Wr/wtBwtweTKHyBF2ZDw+4ibtftzObd9Yvyngp9klWBxbC+RTls3U5lzK+ktJq9zxr7ph78VOYFRQ1HQaxV4jHoh9zShZJZMG1Al793vg+DlmMjkt5sbR3HOMNp2dLszoqYJSBGQeZXXQtUK+kMsVtAKa+43RCqqeLqb1mcKlLDqMn+WfwYeeJIeOsriVNONW3Mw4zdIB4O/Mmgdmt0osOOx/AToUCtgAAAB4nGNgYGBkAIIztovOg+ir1odWwmgATgsHcgAAeJxjYGRgYOADYgkGEGBiYARCNiBmAfMYAASMADkAAAB4nGNgZmJgnMDAysDB6MOYxsDA4A6lvzJIMrQwMDAxsHIywAAjAxIISHNNYXBgSGRIZ3zw/wGDHhOSGsZHQEIBCBkB2FAKcgB4nGNgYGBmgGAZBkYGEAgC8hjBfBYGMyDNAYRMYJlkhvT//8GsRIZUCOv/PLBaNrAoG5ANVMkI5EGMoiFgY2RiYGZhpbU15AIAVAoIOAAAAHicY2BkYGAA4sKi+d/i+W2+MnAzMYDAVetDK5FpJgawOAeEAgAqNgkrAAAAeJxjYGRgYGIAAj0wCWIzMqACJgAF0AA5AgAAAAIAAB0AAwAzAAAAFAAAAAAAAFAAAAcAAHicnY/BSsNAFEXPtElFFOnKnTC4E5yQiRShW6Eb98VtSkPJohlIp7/iH/hDfosf4E0cXXQjNDC8w53z3rwA17xjGD7DnPvEEy54STzlkY/EmZyvxDlX5i7xjLl5lWmySyV27Bp4wg1Piae88etkcj4T59yaPPEMax6o6WjZq0Yatjg2HMWRoJsD1F27r2OzdZtjjKFTciL85asxiWPt2WmcpaKgVF3q/PfUj+XV41joVOr0PGtw6OIq9LvGVkVpl/Z0JUW+cgtXlV72GX+0ltjrqh2VYYdha9ZNf2hDZ31RnjP2G9/jVX94nGNgZkAGjAxoAAAAjgAF) format("woff");font-weight:400;font-style:normal}[data-icon]:before{content:attr(data-icon)}.icon-clip:before{content:"\62"}.icon-cloud:before{content:"\63"}.icon-open:before{content:"\65"}.icon-link:before{content:"\66"}.icon-zip:before{content:"\67"}.icon-download:before{content:"\61"}

/*IMG Buttons*/
.imgButton{display:inline-block;font-size:1.2rem;padding:1.4rem 5rem 1.4rem 1.4rem;border-radius:4px;position:relative;background-color:#263238;color:#fff;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}.imgButton::after,.imgButton::before{position:absolute;right:0;top:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 1rem}.imgButton::before{font-size:1.6rem;z-index:5}.imgButton::after{background-color:#00BCD4;content:"";width:3.6rem}.imgButton:active,.imgButton:focus,.imgButton:hover{text-decoration:none;color:#fff}.imgButton--amber,.imgButton--cyan,.imgButton--green,.imgButton--indigo,.imgButton--purple,.imgButton--red,.imgButton--teal{border-width:2px;border-style:solid}.imgButton--cyan{background-color:#224851;border-color:#00BCD4}.imgButton--red{background-color:#532f30;border-color:#f44336}.imgButton--red::after{background-color:#F44336}.imgButton--green{background-color:#3e4935;border-color:#8bc34a}.imgButton--green::after{background-color:#8BC34A}.imgButton--amber{background-color:#554927;border-color:#ffc107}.imgButton--amber::after{background-color:#FFC107}.imgButton--purple{background-color:#362d4b;border-color:#673AB7}.imgButton--purple::after{background-color:#673AB7}.imgButton--indigo{border-color:#3f51b5;background-color:#2e324a}.imgButton--indigo::after{background-color:#3f51b5}.imgButton--teal{border-color:#009688;background-color:#224041}.imgButton--teal::after{background-color:#009688}[class*=imgButton--cover]{background-size:cover;background-repeat:no-repeat;background-position:center;box-shadow:0 -100px 100px -80px rgba(0,0,0,.3) inset,0 1px 2px 0 rgba(0,0,0,.5)}[class*=imgButton--cover].imgButton--cyan{box-shadow:0 -100px 100px -80px #00BCD4 inset,0 1px 2px 0 rgba(0,0,0,.5)}[class*=imgButton--cover].imgButton--red{box-shadow:0 -100px 100px -80px #f44336 inset,0 1px 2px 0 rgba(0,0,0,.5)}[class*=imgButton--cover].imgButton--green{box-shadow:0 -100px 100px -80px #8bc34a inset,0 1px 2px 0 rgba(0,0,0,.5)}[class*=imgButton--cover].imgButton--amber{box-shadow:0 -100px 100px -80px #ffc107 inset,0 1px 2px 0 rgba(0,0,0,.5)}[class*=imgButton--cover].imgButton--purple{box-shadow:0 -100px 100px -80px #673AB7 inset,0 1px 2px 0 rgba(0,0,0,.5)}[class*=imgButton--cover].imgButton--indigo{box-shadow:0 -100px 100px -80px #3f51b5 inset,0 1px 2px 0 rgba(0,0,0,.5)}[class*=imgButton--cover].imgButton--teal{box-shadow:0 -100px 100px -80px #009688 inset,0 1px 2px 0 rgba(0,0,0,.5)}@-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)[email protected] 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)}}.imgButton--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)[email protected] 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)}}.imgButton--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)[email protected] 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)}}.imgButton--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)[email protected] 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)}}.imgButton--flip:hover::before{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation:flip 1s;animation:flip 1s}.imgButton--cover1{background-image:url(https://2.bp.blogspot.com/-ocRuzFBHo-I/WRZv3EwlTZI/AAAAAAAADU0/IESZ02tuF58fOTzEkGveTDuCUFrBUXcVACLcB/s1600/cover6.png)}.imgButton--cover2{background-image:url(https://2.bp.blogspot.com/-PHJPZT-bzTY/WRZq94DD8VI/AAAAAAAADUY/SplyWLTuQQUU6ezN9FksWaJAgAItwSkVQCLcB/s1600/cover2.png)}.imgButton--cover3{background-image:url(https://4.bp.blogspot.com/-nEwGYo9GDqA/WRZv25b1BRI/AAAAAAAADUs/F5_5lqnwdAkwU-gca3QhXwPGXxinCExygCLcB/s1600/cover3.png)}.imgButton--cover4{background-image:url(https://3.bp.blogspot.com/-Rt_1jWxCQXE/WRZv26eSUdI/AAAAAAAADUo/SXmKoggUDiIim1-SRER8F0z3z_qhrFgNwCLcB/s1600/cover4.png)}.imgButton--cover5{background-image:url(https://3.bp.blogspot.com/-csa_hYwwzpE/WRZv21JkPhI/AAAAAAAADUw/uz9Ij__vBo8Zr2yIYrhwhTYPqinbh_VmwCLcB/s1600/cover5.png)}
    
/*Custom IMG*/
.imgButton--cover6 {
    background-image:url(image.jpg);
}
/*]]>*/</style>

Uso básico

Estos botones los diseñe usando la metodología Bem, la misma que use en la plantilla kuro y es la que pretendo usar de ahora en adelante, así que si estas familiarizado se te hará sencillo usar estos botones.


Default - Para empezar necesitamos una etiqueta <a href="#"></a> con la class imgButton y la class del icono icon-{nameIcon}, donde {nameIcon} se reemplaza por el nombre del icono, pueden elegir entre download, cloud, open, clip, link y zip.


<a class="imgButton icon-download" href="#url">Botón</a>

Colores - Aquí ya vemos un poco mas de Bem. Puedes cambiar los colores base de los botones agregando la class imgButton--{nameColor} en donde {nameColor} se reemplaza por el color, pueden elegir entre cyan, red, green, amber, purple, indigo y teal.


<a class="imgButton imgButton--teal icon-download" href="#url">Botón Color</a>

Animación - Al igual que como pasa con los colores, podemos agregar una animación mediante la class imgButton--{nameFrame} en donde {nameFrame} se reemplaza por el nombre de la animación, pueden elegir entre flip, rotate, rubber y shake.


<a class="imgButton imgButton--rubber icon-download" href="#url">Botón Animación</a>

Imágenes - Por ultimo la razon del pedido. Podemos agregar una imagen para el botón mediante la class imgButton--{nameCover} en donde {nameCover} se reemplaza por cover1, cover2, cover3, cover4 o cover5.


<a class="imgButton imgButton--cover1 icon-download" href="#url">Botón Cover</a>

Imagen personalizada - Si queremos usar una imagen propia primero buscamos el siguiente código:


/*Custom IMG*/
.imgButton--cover6 {
    background-image:url(image.jpg);
}

Y reemplazamos image.jpg por la url de nuestra imagen personalizada, ahora solo resta usar cover6 en lugar de los anteriores. Puedes duplicar el código y agregar las imágenes que quieras, siempre y cuando cada copia tenga un numero mayor (cover7, cover8, etc).


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="imgButton imgButton--green imgButton--shake imgButton--cover2 icon-download" href="#url">Botón Combinado</a>

Se que se ve un poco largo por la metodología sin embargo es bueno usarlas ya que mejora el entendimiento y también reducimos la probabilidad de entrar en conflicto con otras reglas en css.


Si te ha gustado no olvides compartir, eso me ayudaría mucho. Si tienes alguna duda o problema coméntalo, respondo a todos.