Layered Button

HTML
<div class="btn-wrapper"> <div class="btn-wrapper__container"> <div class="btn-inner"> <p class="btn-inner__text">Hover Me</p> </div> </div> </div>
SCSS
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro'); html, body { height: 100%; margin: 0; } body { display: flex; justify-content: center; align-items: center; background-image: url('https://image.ibb.co/icbLMF/ep_naturalblack.png'); } .btn-wrapper { width: 290px; height: 110px; position: relative; margin: 40px auto 0; &:hover { .btn-inner { top: -4px; transform: scale(1, 1); cursor: pointer; } } &__container { border-bottom: 2px solid #15B5E2; position: absolute; width: 100%; height: 80px; &:before, &:after { border-bottom: 2px solid #15B5E2; width: 96%; left: 2%; bottom: -8px; content: ""; position: absolute; } &:after { width: 92%; left: 4%; bottom: -14px; } .btn-inner { width: 104.2%; height: 100%; position: absolute; top: 20px; left: -2.1%; border: 2px solid #15B5E2; box-sizing: border-box; color: #15B5E2; display: flex; justify-content: center; align-items: center; font-family: 'Source Code Pro', monospace; letter-spacing: 1px; text-transform: uppercase; font-size: 18px; background: #10131C; transform: scale(.96, .96); transition: all .3s; z-index: 4; } } }
JAVASCRIPT
Expand for more options Login