Minimal Buttons (Smooth Hover Effect)

HTML
<div class="wrapper"> <div class='button button__one'> Hover Me! </div> <div class='button button__two'> Hover Me Too! </div> </div>
CSS
* { box-sizing: border-box; } html, body { height: 100%; width: 100%; overflow: hidden; background: #ddd6f3; background: linear-gradient(to left, #E55D87 , #5FC3E4); display: flex; justify-content: center; align-items: center; flex-direction: column; font-family: sans-serif; font-weight: 100; font-size: 20px; } .wrapper { display: flex; flex-direction: column; } .button { position: relative; color: #444; display: inline-block; height: 60px; line-height: 60px; text-align: center; transition: 0.5s; padding: 0 20px; cursor: pointer; border: 2px solid #444; margin-bottom: 20px; } .button:hover { border: 2px solid rgba(0,160,80,0); color: #FFF; } .button::before, .button::after { width: 100%; height:100%; z-index: 3; content:''; position: absolute; top:0; left:0; box-sizing: border-box; transform: scale(0); transition: 0.5s; } .button__one::before { border-bottom: 3px solid #FFF; border-left: 3px solid #FFF; transform-origin: 0 100%; } .button__one::after { border-top: 3px solid #FFF; border-right: 3px solid #FFF; transform-origin: 100% 0%; } .button__two::before { border-bottom: 3px solid #FFF; border-left: 3px solid #FFF; transform-origin: 100% 0%; } .button__two::after { border-top: 3px solid #FFF; border-right: 3px solid #FFF; transform-origin: 0% 100%; } .button:hover::after, .button:hover::before { transform: scale(1); }
JAVASCRIPT
Expand for more options Login