HTML/CSS Banner

banner.html

<div id="hire" class="fadeInDown">
  <h3>
    <a href="/hire.html">HIRE ME</a>
  </h3>
  <div class="arrow"></div>
</div>

banner.scss

@mixin logo-gradient($color-one, $color-two) {
  background: $color-one; /* Old browsers */
  background: -moz-linear-gradient(left, $color-one 0%, $color-two 81%); 
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,$color-one), color-stop(81%,$color-two));
  background: -webkit-linear-gradient(left, $color-one 0%,$color-two 81%); 
  background: -o-linear-gradient(left, $color-one 0%,$color-two 81%); 
  background: -ms-linear-gradient(left, $color-one 0%,$color-two 81%);
  background: linear-gradient(left, $color-one 0%,$color-two 81%); 
}

@mixin animation($time, $fill) {
	-webkit-animation-duration: $time;
	   -moz-animation-duration: $time;
	    -ms-animation-duration: $time;
	     -o-animation-duration: $time;
	        animation-duration: $time;
	-webkit-animation-fill-mode: $fill;
	   -moz-animation-fill-mode: $fill;
	    -ms-animation-fill-mode: $fill;
	     -o-animation-fill-mode: $fill;
	        animation-fill-mode: $fill;
}
#hire {
  @include animation(1.2s, 'both');
  width: 102px;
  height: 112px;
  position: absolute;
  top: 0;
  right: 25%;
  
  h3 {
   font-size: 18px;
   font-family: 'museo-sans';
   text-align: center;
   margin-top: 25px;
   a {
     color: #FFF;
     text-decoration: none;
    }
  }
  .arrow {
    position: absolute;
    bottom: 0;
  	width: 0;
  	height: 0;
  	border-left: 51px solid transparent;
  	border-right: 51px solid transparent;
  	border-bottom: 51px solid #FFF;  
  }
}

.cssgradients {
  #hire {
    @include logo-gradient(#422411, #3c5985); 
  }
}