Gradient Button

HTML
<div class="button-wrapper"> <a href="#" class="btn"><span>Hover Me</span></a> </div>
SCSS
body, html { margin: 0; padding: 0; height: 100%; width: 100%; font-family: 'Open Sans', sans-serif; background-color: #333; } .button-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .btn { display: block; height: 50px; width: 186px; position: relative; overflow: hidden; text-decoration: none; text-transform: uppercase; letter-spacing: 4px; color: #333; font-size: 14px; text-align: center; &:after { position: absolute; content: ''; display: inline-block; background: rgba(59, 173, 222, 1); background: linear-gradient(45deg, rgba(239,50,217,1) 0%, rgba(137,255,253,1) 92%, rgba(137,255,253,1) 100%); height: 50px; width: 372px; z-index: -1; transform: translateX(-280px); transition: transform .3s ease-in; } &:hover { &:after { transform: translateX(-200px); } } span { position: relative; top: 16px; } }
JAVASCRIPT
Expand for more options Login