Awesome Button!

HTML
<button type="button" class="btn">I'm awesome!</button>
SCSS
html { height: 100%; width: 100%; } body { background: #222; height: 100%; display: flex; justify-content: center; align-items: center; } @keyframes sparkle { from { background-position: 0% 100%; } to { background-position: 200% 100%; } } .btn { background: white; border: none; display: inline-block; padding: 1.2em 2em; font-family: 'Roboto', sans-serif; text-transform: uppercase; letter-spacing: 2px; border-radius: 4px; position: relative; cursor: pointer; &:before { animation: sparkle 4s infinite linear; background: linear-gradient( 90deg, #2ecc71 0%, #3498db 11%, #e74c3c 22%, #2ecc71 33%, #3498db 44%, #e74c3c 55%, #2ecc71 66%, #3498db 77%, #e74c3c 88%, #7FEFBD 100% ); background-size: 300% 100%; content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 4px; filter: blur(3px); z-index: -1; transform: scale(0.99) translateY(3px); } &:focus { outline: none; } }
JAVASCRIPT
Expand for more options Login