Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Source code [img Buttons]
/*!
* 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;
}
}
/*Iconos y contenedor*/
.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;
}
/*Tamaños*/
.imgbtn--small {
font-size: 12px;
}
.imgbtn--large {
font-size: 20px;
}
.imgbtn--xlarge {
font-size: 20px;
padding: 1.2em 1.2em calc(50px + 1.2em) 1.2em;
}
.imgbtn--xlarge::after, .imgbtn--xlarge::before {
height: 50px;
width: 100%;
bottom: 0;
top: auto;
}
/*Colores*/
.imgbtn--cyan,
.imgbtn--red,
.imgbtn--green,
.imgbtn--amber,
.imgbtn--purple,
.imgbtn--indigo,
.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
}
/*Animaciones*/
@-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
}
/*image style*/
.imgbtn[style] {
font-weight: 700;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.