Easily transform blog comments, spice up a layout or just look cool by doing it.

Thanks to the jQuery Corner plugin, you can create a rounded rectangle just like this one. Easy. Simple. SWEEET!

Download the js file, along with jQuery and then set which elements get rounded. That’s it.

<script type="text/javascript">
jQuery(document).ready(function() 
{
    jQuery(".featurebox").corner();
});
</script>
<div class="featurebox">This is content within a rounded rectangle.  Pretty painless huh?</div>

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;
	});
});

Ever want to have your links fade from one color to the next?

On a standard link hover, you get two colors: the normal link color and the hover color.

But thanks to jQuery and the Color Animations plugin, you can cross-fade to colors.

$(function() {
	$("a").hover(
	
		function () {
			if ($(this).is(":animated")) {
				$(this).stop().animate({color:"#ff0000"}, 500);
			}else{
				$(this).animate({color:"#ff0000"}, 1500);
			}
		},
		
		function () {
		if ($(this).is(":animated")) {
			$(this).stop().animate({color:"#0000ff"}, 500);
		}else{
			$(this).animate({color:'#0000ff'}, 1500);
		}
		
		});
			
});