Animated cSS3 StarBurst

_starburst.scss

// ----
// libsass (v3.2.2)
// ----

/* # Starburst 1

Markup:
<a href="#" class="starburst1"><span><br />NEW<br />CSS3<br />Starbursts!</span></a>

Styleguide fragments.components.starburst
*/
$str-bg-color: #ff47ab !default;
$str-txt-color: white !default;
@mixin starburst{
    display:block;
    position:absolute;
	  top:2em;
	  left:2em;
	  
	  width:6em;
	  height:6em;
	  
	  background:$str-bg-color;
	  text-align:center;
	  text-decoration:none;
	  color:$str-txt-color;
	  font-weight:bold;
	  font-family:Arial, sans-serif;
	  text-shadow:0 0 3em #f00, 0 0 4px #88004a;

	  transition: transform 0.3s ease;
	  transform: rotate(-22.5deg);
    
    span {
    	display:block;
    	width:6em;
    	height:6em;
    	background:#ff47ab;

    	transform: rotate(45deg);
    }

    &:hover,
    &:hover span {
    	background:#f00;
    	color:#fff;
    	text-shadow:0 0 20px #fff, 0 0 8px #fff;
    }
    
    &:hover {
    	transform:rotate(-405deg);
    }
}


.starburst1{
  @include starburst;
}

starburst-input-HTML.html

<a href="#" class="starburst1"><span><br />NEW<br />CSS3<br />Starbursts!</span></a>

starburst-output.css

/* # Starburst 1

Markup:
<a href="#" class="starburst1"><span><br />NEW<br />CSS3<br />Starbursts!</span></a>

Styleguide fragments.components.starburst
*/
.starburst1 {
  display: block;
  position: absolute;
  top: 2em;
  left: 2em;
  width: 6em;
  height: 6em;
  background: #ff47ab;
  text-align: center;
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 3em #f00, 0 0 4px #88004a;
  transition: transform 0.3s ease;
  transform: rotate(-22.5deg);
}

.starburst1 span {
  display: block;
  width: 6em;
  height: 6em;
  background: #ff47ab;
  transform: rotate(45deg);
}

.starburst1:hover,
.starburst1:hover span {
  background: #f00;
  color: #fff;
  text-shadow: 0 0 20px #fff, 0 0 8px #fff;
}

.starburst1:hover {
  transform: rotate(-405deg);
}