Button Effect with CSS3 Gradients & jQuery

Create a fancy fading button without images

Since CSS3 doesn’t support transitioning gradient backgrounds yet, I wanted to show a simple way to fade between two gradients using only CSS3 and jQuery.

View Demo Download Source

Markup:

<a id="button" href="">
  Download
  <span></span>
</a>

CSS:

First we set up our button CSS.

#button {
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	color:#FFF;
	font-size:18px;
	font-weight: bold;
	text-decoration:none;
	text-shadow:-1px -1px 0px rgba(111,43,23,0.25);
	background: #ff8200; /* Old browsers */
	background: -moz-linear-gradient(top,  #ff8200 34%, #ff4800 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(34%,#ff8200), color-stop(100%,#ff4800)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ff8200 34%,#ff4800 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ff8200 34%,#ff4800 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ff8200 34%,#ff4800 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ff8200 34%,#ff4800 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8200', endColorstr='#ff4800',GradientType=0 ); /* IE6-9 */
	box-shadow:2px 2px 0px rgba(0,0,0,0.5);
	display:inline-block;
	padding:8px 35px; /* Adjusts the size of the button */
	position: relative; /* This enables us to apply a z-index property */
	z-index: 100; /* A higher number will pull our text above the <span> tag */
	transition: all 300ms linear 0s; /* Fades the text */
	}
#button:hover {
	color:#33332d;
	text-shadow: none;
	}

The trick is that we put an absolutely positioned, 100% width, 100% height hidden span tag nested in our link, and we use jQuery to fade it in when the user hovers the button. By setting the z-index of the positioned element, we are able to move the span below the text.

#button span {
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
	top: 0;
	left: 0;
	z-index: -1; /* Places the span below the link text */
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 41%, #c4c4c4 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(41%,#ffffff), color-stop(100%,#c4c4c4)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 41%,#c4c4c4 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 41%,#c4c4c4 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 41%,#c4c4c4 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 41%,#c4c4c4 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c4c4c4',GradientType=0 ); /* IE6-9 */
	}

Javascript:

CSS can’t do the additional work we need to make the span fade in, so we use a little jQuery to accomplish the desired effect.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/button.js"></script>

$(document).ready(function() {

   $("#button").hover(
      function(){   // When the hover begins
        $("#button span").fadeIn(300);
      },
      function(){   // When the hover ends
        $("#button span").fadeOut(300);
      }
   );

});

There you have it! Works in Firefox, Chrome and IE8+ (minus the CSS3 transition)