A CodePen by Nicholas Smith. scss/compass animated button - inspired by Mary Lou http://tympanus.net/Tutorials/CircleHoverEffects/ this is just a version of the button i created with a few subtle differences using scss/compass

index.html

<div class="page-wrap">
<div class="contain-lynch contain-lynch-bkground">
            <div class="info-lynch">
                <h3>David Lynch</h3>
                <div class="border"></div>
                <p>A bad cup of coffee is better than no coffee at all</p>
                <div class="button"><a href="#" class="click">BIO</a></div>
            </div>
        </div>
</div>

script.js

/* inspired by Mary Lou 
  
http://tympanus.net/Tutorials/CircleHoverEffects/

this is just a version of the button i created.
  

style.scss

@import "compass";
.page-wrap {
  margin: 20px auto;
  width: 300px;
  height: 300px;
}
  
@mixin text-shadow($hshadow: 0px, $vshadow: 1px, $blur: 0px, $color: rgba(255,255,255,.5)) {
  text-shadow: $hshadow $vshadow $blur $color;
  -moz-text-shadow: $hshadow $vshadow $blur $color;
  -webkit-text-shadow: $hshadow $vshadow $blur $color;
  -o-text-shadow: $hshadow $vshadow $blur $color;
	-ms-text-shadow: $hshadow $vshadow $blur $color;
}
@mixin box-shadow($hshadow: 5px, $vshadow: 5px, $spread: 0px, $blur: 20px, $color: #3D3D3D) {
    box-shadow: $hshadow $vshadow $spread $blur $color;
    -moz-box-shadow: $hshadow $vshadow $spread $blur $color;
    -webkit-box-shadow: $hshadow $vshadow $spread $blur $color;
    -ms-box-shadow: $hshadow $vshadow $spread $blur $color;
    -o-box-shadow: $hshadow $vshadow $spread $blur $color;
}
@mixin box-shadow-inset($inset: inset, $hshadow: 0px, $vshadow: 0px, $spread: 0px, $blur: 1px, $color: rgba(255,255,255,0.1)) {
    box-shadow: $inset $hshadow $vshadow $spread $blur $color;
    -moz-box-shadow: $inset $hshadow $vshadow $spread $blur $color;
    -webkit-box-shadow: $inset $hshadow $vshadow $spread $blur $color;
    -ms-box-shadow: $inset $hshadow $vshadow $spread $blur $color;
    -o-box-shadow: $inset $hshadow $vshadow $spread $blur $color;
}
@mixin border($radius) {
	border-radius: $radius;
	-moz-border-radius: $radius;
	-webkit-border-radius: $radius;
	-ms-border-radius: $radius;
	-o-border-radius: $radius;
}
@mixin transition($speed: 0.4s, $delay: 0s) {
	transition: all $speed ease-in-out $delay;
	-moz-transition: all $speed ease-in-out $delay;
	-webkit-transition: all $speed ease-in-out $delay;
	-ms-transition: all $speed ease-in-out $delay;
	-o-transition: all $speed ease-in-out $delay;
}
@mixin opacity($opacity: 1) {
	opacity: $opacity;
	-moz-opacity: $opacity;
	-webkit-opacity: $opacity;
	-ms-opacity: $opacity;
	-o-opacity: $opacity;
}
@mixin transform($position) {
	transform: $position;
	-moz-transform: $position;
	-web-transform: $position;
	-ms-transform: $position;
	-o-transform: $position;
}

// variables

$font-family: Helvetica;

.contain-lynch {
	width: 300px;
	height: 300px;
	overflow: hidden;
	position: relative;
	@include border(50%);
	cursor: default;
	margin: 0 0 20px 0;
	@include box-shadow-inset(inset, 0, 0, 0, 16px, rgba(255,255,255,0.6));
    @include transition;
    border: 5px solid #000;
}
.contain-lynch-bkground {
    background: transparent url(http://www.icutpeople.com/images/lynch.jpg) no-repeat;
}
.info-lynch {
	margin: 0 auto;
	position: absolute;
	background: #ccc;
	width: inherit;
	height: inherit;
	@include border(50%);
	overflow: hidden;
	@include opacity(0);
	@include transition;
	@include transform(rotate(-180deg));
	@include box-shadow-inset(inset, 0, 0, 0, 1px, rgba(255,255,255,0.1));

	h3 {
		color: #000;
	    text-transform: uppercase;
	    letter-spacing: 2px;
	    font-size: 1.5em;
	    font-weight: bold;
        margin: 50px 30px 30px 60px;
	    padding: 45px 0 0 0;
	    font-family: $font-family;
	    @include text-shadow(0, 1px, 2px, #fff);
	}

	p {
		color: #000;
	    padding: 10px 5px;
	    font-style: italic;
	    margin: 20px 60px;
	    font-size: 0.9em;
	    line-height: 1.2em;
      text-align: center;
	    @include opacity(0);
	    @include transition(1s, 0.4s)
	}
		a.click {
		color: #000;
	    font-style: italic;
	    font-size: 0.8em;
	    text-decoration: none;
	    margin: 70px 0;
	    padding: 12px 8px;
	    outline: none;
	    @include border(50%);
	    background: #999;
	    @include transition(1s, 0.5s);
	}
}
.border {
	margin: 0 auto;
	text-align: center;
	content: "";
	height: 1px;
	width: 200px;
	border-top: 1px solid #000;
}
.button {
	position: absolute;
	top: 150px;
	left: -300px;
	margin: 0 auto;
	width: inherit;
	height: inherit;
	@include transition(1s, 0.4s);;
}
.contain-lynch:hover {
	@include box-shadow-inset(inset, 0, 0, 0, 200px, rgba(255,255,255,0.1));

  .info-lynch  {
	   width: inherit;
	   height: inherit;
	   @include transform(scale(1));
	   @include opacity(0.9);
   }
 .info-lynch p {
	   @include opacity(1);
   }
 .button {
	   width: inherit;
	   height: inherit;
	   top: 145px;
	   left: 130px;
    }
}