CSS Gif Button

HTML
<button onclick="#" class="button">Awesome!</button>
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; }
JAVASCRIPT
Expand for more options Login