Fancy animated call to action button mixin.

fancy-cta.scss

// CALL TO ACTION BUTTON - INSPIRED BY CODROPS, 5th button, top section @ http://tympanus.net/Development/CreativeButtons/
// Fancy hover effect happens on desktop, but does not occur on mobile in order work with iOS hover behavior
 
$bg-color: #0e83cd;
$color: #fff;
 
@mixin call-to-action() {
  position: relative;
  z-index: 1;
  
  .call-to-action {	
	color: $color;
	background-color: transparent;
	border: 2px solid $color;
	border-radius: 8px;
	position: relative;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font-size: 1.2em;
	font-weight: 700;
	font-family: inherit;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 1px;
	outline: none;
	padding: 0.75em 1em;
	margin: 15px 30px;
	overflow: hidden;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
 	cursor: pointer;

	&:active {
	  background-color: $color;
	  color: shade($bg-color, 15%);
	}
 
	&:after {
	  content: '';
	  position: absolute;
	  z-index: -1;
	  width: 100%;
	  height: 0;
	  top: 50%;
	  left: 50%;
	  background: $color;
	  opacity: 0;
	  -webkit-transition: all 0.3s;
	  -moz-transition: all 0.3s;
	  transition: all 0.3s;
	  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	  transform: translateX(-50%) translateY(-50%) rotate(45deg);
	}
 
	// relies on modernizr 
	html.no-touch & {
	  &:hover,
	  &:active {
		color: shade($bg-color, 15%);
	  }
	  &:hover {
		background-color: transparent;
	  }
	  &:hover:after {
		height: 400%;
		opacity: 1;
	  }
 
	  &:active:after {
		height: 400%;
		opacity: 1;
	  }
	}
  }
}