Button Hover Effect

HTML
<a> <span class="text">Hover me</span> <span class="line -right"></span> <span class="line -top"></span> <span class="line -left"></span> <span class="line -bottom"></span> </a>
SCSS
$thick : 3px; $pad : 0.7em; $extra : calc(#{$pad} * 1.2); $color : #3498db; body { background: #2d2d2d; } a { position: fixed; cursor: pointer; top: 50vh; left: 50%; color: white; transform: translate3d(-50%,-50%,0); text-transform: uppercase; padding: $pad $extra; display: inline-block; border: $thick solid transparent; position: relative; font-size: 1.5em; letter-spacing: 0.07em; .text { // padding: 0 0.3em; font-family: 'Roboto', sans-serif; transform: translate3d(0,$pad,0); display: block; transition: transform 0.4s cubic-bezier(.2,0,0,1) 0.4s; } &:after { position: absolute; content: ''; bottom: -$thick; left: $extra; right: $extra; height: $thick; background: $color; z-index: -1; transition: transform 0.8s cubic-bezier(1,0,.37,1) 0.2s, right 0.2s cubic-bezier(.04,.48,0,1) 0.6s, left 0.4s cubic-bezier(.04,.48,0,1) 0.6s; transform-origin: left; } } .line { position: absolute; background: $color; &.-right, &.-left { width: $thick; bottom: -$thick; top: -$thick; transform: scale3d(1,0,1); } &.-top, &.-bottom { height: $thick; left: -$thick; right: -$thick; transform: scale3d(0,1,1); } &.-right { right: -$thick; transition: transform 0.1s cubic-bezier(1,0,.65,1.01) 0.23s; transform-origin: top; } &.-top { top: -$thick; transition: transform 0.08s linear 0.43s; transform-origin: left; } &.-left { left: -$thick; transition: transform 0.08s linear 0.51s; transform-origin: bottom; } &.-bottom { bottom: -$thick; transition: transform 0.3s cubic-bezier(1,0,.65,1.01); transform-origin: right; } } a:hover, a:active { .text { transform: translate3d(0,0,0); transition: transform 0.6s cubic-bezier(.2,0,0,1) 0.4s; } &:after { transform: scale3d(0,1,1); right: -$thick; left: -$thick; transform-origin: right; transition: transform 0.2s cubic-bezier(1,0,.65,1.01) 0.17s, right 0.2s cubic-bezier(1,0,.65,1.01), left 0s 0.3s; } .line { transform: scale3d(1,1,1); &.-right { transition: transform 0.1s cubic-bezier(1,0,.65,1.01) 0.2s; transform-origin: bottom; } &.-top { transition: transform 0.08s linear 0.4s; transform-origin: right; } &.-left { transition: transform 0.08s linear 0.48s; transform-origin: top; } &.-bottom { transition: transform 0.5s cubic-bezier(0,.53,.29,1) 0.56s; transform-origin: left; } } }
JAVASCRIPT
Expand for more options Login