Button Hover Border Animations

HTML
<div class="wrapper"> <h2>Clockwise</h2> <div class="row"> <div class="button clockwise horizontal">Horizontal</div> <div class="button clockwise vertical">Vertical</div> <div class="button clockwise both">Both <div class="inner"></div> </div> </div> <h2>Counter-clockwise</h2> <div class="row"> <div class="button counterclockwise horizontal">Horizontal</div> <div class="button counterclockwise vertical">Vertical</div> <div class="button counterclockwise both">Both <div class="inner"></div> </div> </div> </div><a class="codepen-link" href="http://www.codepen.io/seanfree" target="_blank"></a>
SASS
html, body color: white background: rgb(50,60,70) font-weight: lighter h1, h2, h3, h4 font-family: 'Oswald' .wrapper display: flex flex-direction: column flex-wrap: wrap align-items: center justify-content: center width: 100vw height: 100vh .row display: flex margin: 10px 0 h2 font-size: 1.8em .button position: relative cursor: pointer color: white font-family: 'Lato' font-size: 1.5em padding: 0.5em 1em 0.65em margin: 0 10px background: rgb(60,70,80) .inner position: absolute top: 0 left: 0 width: 100% height: 100% &:nth-of-type(1) &:before, &:after, .inner:before, .inner:after background-color: #ffa726 &:nth-of-type(2) &:before, &:after, .inner:before, .inner:after background-color: #26a69a &:nth-of-type(3) &:before, &:after, .inner:before, .inner:after background-color: #7e57c2 &:before, &:after, .inner:before, .inner:after position: absolute content: "" display: block transition: transform 0.3s &.horizontal, &.both &:before, &:after left: 0 width: 100% height: 2px transform: scaleX(0) .inner &:before, &:after top: 0 width: 2px height: 100% transform: scaleY(0) &:before left: 0 &:after right: 0 &:hover &:before, &:after transform: scaleY(1) &:before top: 0 &:after bottom: 0 &:hover &:before, &:after transform: scaleX(1) .inner:before, .inner:after transform: scaleY(1) &.clockwise .inner &:before transform-origin: top center &:after transform-origin: bottom center &:before transform-origin: right center &:after transform-origin: left center &:hover .inner &:before transform-origin: bottom center &:after transform-origin: top center &:before transform-origin: left center &:after transform-origin: right center &.counterclockwise .inner &:before transform-origin: bottom center &:after transform-origin: top center &:before transform-origin: left center &:after transform-origin: right center &:hover .inner &:before transform-origin: top center &:after transform-origin: bottom center &:before transform-origin: right center &:after transform-origin: left center &.vertical &:before, &:after top: 0 width: 2px height: 100% transform: scaleY(0) &:before left: 0 &:after right: 0 &:hover &:before, &:after transform: scaleY(1) &.clockwise &:before transform-origin: top center &:after transform-origin: bottom center &:hover &:before transform-origin: bottom center &:after transform-origin: top center &.counterclockwise &:before transform-origin: bottom center &:after transform-origin: top center &:hover &:before transform-origin: top center &:after transform-origin: bottom center .codepen-link position: absolute bottom: 30px right: 30px height: 40px width: 40px z-index: 10 border-radius: 50% box-sizing: border-box background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg') background-position: center center background-size: cover opacity: 0.5 transition: all 0.25s &:hover opacity: 0.8 box-shadow: 0 0 6px #efefef
JAVASCRIPT
Expand for more options Login