Here’s a fun way to reinvent the button:
1. Let’s start with a simple anchor link:
<a href=”#” class=”coolbutton”>Click Here</a>
2. By adding elements into the anchor tag and styling them with CSS, you can create a nice button from this anchor tag.
DEMO:
jQuery(document).ready(function() {
var linkText=jQuery(".coolbutton").html();
jQuery(".coolbutton").html("<b><em>" + linkText + "</em></b><span></span>");
jQuery(".coolbutton").css("color","#000000");
jQuery(".coolbutton").css("text-decoration","none");
jQuery(".coolbutton b").css("font-weight","normal");
jQuery(".coolbutton b *").css("font-style","normal");
jQuery(".coolbutton b").css("display","block");
jQuery(".coolbutton b").css("width","80px");
jQuery(".coolbutton b").css("position","absolute");
jQuery(".coolbutton").css("display","block");
jQuery(".coolbutton").css("border","1px solid #707070");
jQuery(".coolbutton").css("width","80px");
jQuery(".coolbutton").css("height","20px");
jQuery(".coolbutton b").css("text-align","center");
jQuery(".coolbutton b").css("padding-top","2px");
jQuery(".coolbutton").css("background","#d4d4d4");
jQuery(".coolbutton span").css("display","block");
jQuery(".coolbutton span").css("height","10px");
jQuery(".coolbutton span").css("background","#ececec");
jQuery(".coolbutton *").css("cursor","default");
jQuery(".coolbutton").css("-moz-border-radius","5px");
jQuery(".coolbutton").css("-khtml-border-radius","5px");
jQuery(".coolbutton").css("-webkit-border-radius","5px");
jQuery(".coolbutton").css("border-radius","5px");
jQuery(".coolbutton").hover(function() {
jQuery(this).css("border","1px solid #3c7fb1");
jQuery(this).css("background","#bce5fc");
jQuery(this).addClass("active");
jQuery(".active span").css("background","#e6f5fd");
},function() {
jQuery(".active span").css("background","#ececec");
jQuery(this).css("border","1px solid #707070");
jQuery(this).css("background","#d4d4d4");
jQuery(this).removeClass("active");
});
jQuery(".coolbutton").mousedown(function() {
jQuery(this).css("border","1px solid #2c628b");
jQuery(this).css("background","#86c6e8");
jQuery(this).addClass("active");
jQuery(".active span").css("background","#d8eefa");
jQuery(".active b *").css("border","1px dotted #202020");
jQuery(".active b *").css("padding-left","3px");
jQuery(".coolbutton").mouseup(function() {
jQuery(this).css("border","1px solid #3c7fb1");
jQuery(this).css("background","#bce5fc");
jQuery(this).addClass("active");
jQuery(".active span").css("background","#e6f5fd");
jQuery(".active b *").css("border","none");
jQuery(".active b *").css("padding-left","0");
});
});
jQuery(".coolbutton").click(function(){
alert("Hello");
return false;
});
});