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
