CSS
body {
background-image: -webkit-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
background-image: -moz-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
background-image: -ms-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
background-image: -o-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
-webkit-background-size: 4px 4px;
-moz-background-size: 4px 4px;
-o-background-size: 4px 4px;
background-size: 4px 4px;
width:100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.button {
position: relative;
z-index: 1;
border: 0;
outline: 0;
padding: 1.4em;
text-transform: uppercase;
font-size: 22px;
letter-spacing: 3px;
color: #1a2026;
-webkit-font-smoothing: antialiased;
font-weight: bold;
}
.button:hover {
cursor:pointer;
}
.button:before,
.button:after {
content: "";
position: absolute;
}
.button:before {
background: white;
z-index: -1;
top: .4em;
left: .4em;
right: .4em;
bottom: .4em;
-webkit-transition: all .15s;
-moz-transition: all .15s;
transition: all .15s;
}
.button:after {
z-index: -2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(https://media.giphy.com/media/c54YHGDH63jJC/giphy.gif);
background-position: center;
}
.button:hover:before {
top: .1em;
left: .1em;
right: .1em;
bottom: .1em;
}
body {
text-align: center;
}
2 Responses