StackOverflow Button

by Praveen Kumar Purushothaman

HTML

<a href="#" class="button"><span>Hello!</span></a>
<a href="#" class="button nospan">Hello!</a>
<a href="http://www.praveentech.com/" class="sobutton">Hello!</a>

CSS

a {text-decoration: none; color: #666; font-family: Segoe UI; font-size: 8pt; line-height: 1;}
.button {border: 1px solid #ccc; padding: 2px; border-radius: 3px; border-bottom-width: 2px; display: inline-block;}
.button span {background: #f5f5f5; padding: 2px; display: inline-block; border-radius: 2px;}
.button.nospan {padding: 4px; background: #f5f5f5;}
.sobutton {padding: .1em .6em; border: 1px solid #ccc; background-color: #f7f7f7; -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset; -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset; box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset; border-radius: 3px; display: inline-block; margin: 0 .1em; text-shadow: 0 1px 0 #fff; line-height: 1.4; white-space: nowrap;
}

JavaScript

var links = document.getElementsByTagName("a");
for (i= 0; i < links.length; i++)
    links[i].onclick = function(){return false;}