Stylish CSS3 animated button

index.html

<div class="wrapper">
    <p class="inner">
        <a href="javascript: void 0;" class="button">
            <span class="border"></span>
            <span class="top"></span>
            <span class="right"></span>
            <span class="bottom"></span>
            <span class="left"></span>
            <span class="text">click to explore</span>
        </a>
    </p>
</div>

style.scss

@import "compass/css3";
@import "compass/reset/";
@import "compass/css3/";
@import url(http://fonts.googleapis.com/css?family=Oswald:400);

/* variables */
$themeCol1: #ebff33;

html, body, .wrapper { height: 100%; }
body {
  background: url(https://dl.dropboxusercontent.com/u/5233512/vAWRj.jpg) 50% 50% no-repeat;
  @include background-size(cover);
  font-family: 'Oswald', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
.wrapper {
    background: rgba(0,0,0,.7);
    &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(https://dl.dropboxusercontent.com/u/5233512/f2DRJ.png);
    }
}
.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -21px 0 0 -116px;
}
.button {
	position: absolute;
	display: block;
	width: 230px;
	height: 42px;
	color: $themeCol1;
	font-size: 21px;
	line-height: 200%;
	text-transform: uppercase;
    text-decoration: none;
	text-align: center;
    z-index: 1;
    & span {
        position: absolute;
        @include transition-property(all);
        @include transition-duration(.2s);
        @include transition-timing-function(ease-out);
        z-index: 1;
    }
    & .border {
        border: 1px solid $themeCol1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0,0.6);
    }
    & .top, & .bottom, & .left, & .right {
        background-color: $themeCol1;
        height: 1px;
        width: 0;
    }
    & .left, & .right { height: 0; width: 1px; }
    & .top {
        top: -5px;
        left: -15px;
    }
    & .bottom {
        bottom: -5px;
        right: -15px;
    }
    & .left {
        top: -15px;
        right: -5px;
    }
    & .right {
        bottom: -15px;
        left: -5px;
    }
    &:hover {
        color: #fff;
        & .border {
            top: -5px;
            bottom: -5px;
            left: -5px;
            right: -5px;
        }
        & .top, & .bottom { width: 230px; }
        & .left, & .right { height: 40px; }
        & .top { left: -5px; }
        & .bottom { right: -5px; }
        & .left { top: -5px; }
        & .right { bottom: -5px; }
    }
    & .text {
        position: relative;
        letter-spacing: .03em;
    }
}

Stylish-CSS3-animated-button.markdown

Stylish CSS3 animated button

Original design idea from oregongridiron.com. Added new animation effects & sassed:D

A Pen by Hiro on CodePen.

License.