#Codevember 7 - Shining Button

HTML
<a href="#" class="button">shine!</a>
SCSS
html, body { background-color: #071829; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .button { text-decoration: none; text-transform: uppercase; font-family: 'Exo 2', sans-serif; font-weight: 300; font-size: 30px; letter-spacing: 4px; display: inline-block; position: relative; text-align: center; color: #2ecc71; border: 1px solid #2ecc71; line-height: 3em; padding-left: 3em; padding-right: 3em; box-shadow: 0 0 0 0 transparent; transition: all 0.2s ease-in; } .button:hover { color: white; box-shadow: 0 0 30px 0 #2ecc71; background-color: #2ecc71; transition: all 0.2s ease-out; } .button:hover:before { animation: shine 0.5s 0s linear; } .button:active { box-shadow: 0 0 0 0 transparent; transition: box-shadow 0.2s ease-in; } .button:before { content: ''; display: block; width: 0px; height: 86%; position: absolute; top: 7%; left: 0%; opacity: 0; background: white; box-shadow: 0 0 15px 3px white; transform: skewX(-20deg); } @keyframes shine { from { opacity: 0; left: 0%; } 50% { opacity: 1; } to { opacity: 0; left: 100%; } }
JAVASCRIPT
Expand for more options Login