A CodePen by Gabriel do Nascimento Barbier. Linear-gradient - It's an up-to-date way to make linear gradients. Cross-browser and with fallbacks for older Internet Explorer and Mobile Browsers. Thanks to Lea Verou (http://lea.verou.me/2013/04/can-we-get-rid-of-gradient-prefixes/) and Bernard de Luna (http://tableless.com.br/como-usar-gradient-no-…

index.html

<button class="redSpartan">Red team wins</button>
<br />
<button class="blueSpartan">Blue team wins</button>

style.css

/*
**  Let's Gradient it all!!!
**  background-color: Fallback for IE9-;
**  background-image: -webkit-linear-gradient Fallback for Safari and Mobile Browsers;
**  First color it's a thin white line, second color it's where the gradient begins and the thrid completes the effect. It finishes 30% AFTER the element height for a smoother effect.
**  At :hover it's the reverse. It begins 30% BEFORE the element height.
**
**  Especial thanks to:
**  Lea Verou - http://lea.verou.me/2013/04/can-we-get-rid-of-gradient-prefixes/
**  Bernard de Luna - http://tableless.com.br/como-usar-gradient-no-css-de-forma-consciente/#.UazwCUCyCSI
*/

button{
  border-radius: .4em;
  color: rgba(255,255,255,1);
  cursor: pointer;
  font-size: 1.5em;
  padding: .1em .5em;
}

.redSpartan{
  border: 1px solid #9e3b2e;
  background-color: #ea5b57;
  background-image: linear-gradient(to bottom, rgba(255,255,255,.3), #ea5b57 1px, #bf3831 130%);
  background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), #ea5b57 1px, #bf3831 130%);
}

.redSpartan:hover{
  background-image: linear-gradient(to bottom, #bf3831 -30%, #ea5b57);
  background-image: -webkit-linear-gradient(top, #bf3831 -30%, #ea5b57);
}

.blueSpartan{
  border: 1px solid #4f8ba5;
  background-color: #5abedb;
  background-image: linear-gradient(to bottom, rgba(255,255,255,.3), #5abedb 1px, #3392b0 130%);
  background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), #5abedb 1px, #3392b0 130%);
}

.blueSpartan:hover{
  background-image: linear-gradient(to bottom, #3392b0 -30%, #5abedb);
  background-image: -webkit-linear-gradient(top, #3392b0 -30%, #5abedb);
}