JSFiddle - React, Tailwind, and code Playground

HTML

<div class="buttons">
<a href="">Home</a>
<a href="">About</a>
<a href="">Contact</a>
<a href="">Portfolio</a>
</div>

<p>Best viewed in Safari, Chrome or Firefox. <br /> Designed by <a href="http://forrst.com/people/dougneiner">Doug Neiner</a> (<a href="http://twitter.com/dougneiner">@dougneiner</a>) for a fun competition <a href="http://forrst.com/posts/CSS_Button_Contest-5J1">over at Forrst</a><br /><br />If anyone want to use or abuse these styles, feel free.<br />I am releasing this code as public domain. No attribution necessary.</p>

CSS

body {
  background: #fefefe;
}


.buttons a:focus {
  /* For portfolio display.
     Bad for accessibility, don't do this: */
  outline: none;
}

.buttons, p { width: 390px; margin: 0 auto; }
.buttons { margin-top: 30px }

.buttons a {
  float: left;
  position: relative;
  padding: 6px 20px;
  margin: 10px 0 10px 15px;
  
  font: bold 12px Arial, sans-serif;
  text-decoration: none;
  color: #683b00;
  text-shadow: #ffce00 0 1px 0, rgba(255,255,255,0.5) 0 0 5px;
  
  border: solid 1px #e47916;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  
  background-color: #ffce00;
  background-image: -moz-linear-gradient(top, #ffce00, #ff8d17 75%); /* FF3.6 */
  background-image: -webkit-gradient(radial, center center, 10, center center, 300, from(rgba(150,0,0,0)), to(rgba(150,0,0,1.00)) ), -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffce00),color-stop(0.75, #ff8d17)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffce00', EndColorStr='#ff8d17'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffce00', EndColorStr='#ff8d17')"; /* IE8 */
}

.buttons a:after, .buttons a:before {
  content: "";
  position: absolute;
}

.buttons a:after {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: solid 1px rgba(255,255,255,0.5);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.buttons a:before {
  left: -5px;
  top: -5px;
  right: -5px;
  bottom: -5px;
  border: solid 4px #dedede;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}

.buttons a:hover {
  background-color: #ffee34;
  background-image: -moz-linear-gradient(top, #ffee34, #ffad3a 75%); /* FF3.6 */
  background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(rgba(150,0,0,0)), to(rgba(150,0,0,1.00)) ), -webkit-gradient(linear,left top,left bottom,color-stop(0,...

JavaScript

// Keep the buttons from going anywhere
// when clicked
$(".buttons a").live("click", function(e){e.preventDefault();});