• Home
• ajax
• CSS
• Freebies
• How-To
• jQuery
• Php
• Web Design
• Web Hosting
• Wordpress

Ever think of creating cool and stylish rounded corners buttons with css and minimal images? Everyone needs these buttons or styles for their projects. I have found a very interesting button example called Wii buttons. The rollover effect on these buttons is very stylish and appealing. Look at the samples below.

Compatibility

These buttons are tested with IE6, IE5.5, IE7, Safari 2, Firefox 2, Opera 9.

Here is a quick overview to create your own buttons.

First, Download the image (Click here to download)

Now copy the following CSS and past it between head tags, or in your stylesheet (make sure you correct the image path.

a.button, span.button, del.button{

	display:-moz-inline-box;
	display:inline-block;
	cursor:pointer;
	border:none;
    font-size:0;
    line-height:0;

	/*
	for Safari, read this first
	http://creativebits.org/webdev/safari_background_repeat_bug_fix
	*/
	background-position:0 0;
	background-repeat:no-repeat;
	height:30px;
	text-decoration:none;
	color:#2e523b;
	font-style:normal;
	margin:0 6px 0px 0;
	padding:0 10px 0 0;
	vertical-align:middle;	

    padding-top:-2px;
	_position:relative;
	_width:10px;
	_overflow-y:hidden;
}
a.button, span.button, del.button,
a.button span, span.button button, span.button input, del.button span{
    background-image:url(btn0.png);
    _background-image:url(btn0.png);
}
a.button span, span.button button, span.button input, del.button span{
white-space:nowrap;
	cursor:pointer;
    color:#222;
	display:-moz-inline-box;
	display:inline-block;
	line-height:1;
    letter-spacing:0 !important;
    font-family:"Arial" !important;
    font-size:12px !important;
    font-style:normal;
    background-color:transparent;
	background-position:100% 0;
	background-repeat:no-repeat;
	height:30px;
	padding:8px 20px 0 10px;
	margin:0 -16px 0 10px;
	border:none;
	vertical-align:text-top;
	zoom:1;
	_position:relative;
    _padding-left:0px;
	_padding-right:12px;
	_margin-right:-10px;
	_display:block;
	_top:0;
	_right:-5px;

}
span.button button{
   line-height:2.5;/*Opera need this*/
}

html.safari a.button span,
html.safari del.button span{
  line-height:1.3;
}

html.safari span.button button{
  line-height:2.6;
}

html.safari a.button:focus,
html.safari span.button button:focus{
    outline:none;
}
del.button{
	/* cursor:not-allowed;	*/
	background-position:0 -120px;

}
del.button span{
	cursor:default;
    color:#aaa !important;
	background-position:100% -120px;
}
span.button button, span.button input{
	padding-top:0px;
	line-height:2.5;/*Opera need this*/
}
/** optional **/
/*
a.button:visited{
	color:#aaa;
}
*/
/*Hover Style*/
a.button:hover,
span.button:hover,
a.button:focus,
a.dom-button-focus,
span.button-behavior-hover{
	background-position:0 -60px;
	color:#222;
	text-decoration:none;
}
a.button:hover span,
span.button:hover button,
a.button:focus span,
span.button-behavior-hover button,
span.button-behavior-hover input{
	background-position:100% -60px;
}
a.button:active, a.button:focus span{
	color:#444;
}
del.button-behavior-hover, del.button:hover{
	background-position:0 -180px;
	/* cursor:not-allowed; */
}
del.button-behavior-hover span, del.button:hover span{
	background-position:100% -180px;
	/* cursor:not-allowed; */
}
/*Optional hack for IE6 to simulate :hover selector*/
span.button button, del.button span, span.button input{
	_behavior:expression(
		(function(el){
			if( typeof( behavior_onMouseEnter) == 'undefined'){
				behavior_onMouseEnter = function(el){
					var dEl = this.parentNode;
					var sClass = dEl.className ;
					dEl.__defaultClassName = sClass ;
					dEl.className = sClass + ' button-behavior-hover';
					this.setCapture();
				};
				behavior_onMouseLeave = function(el) {
					var dEl = this.parentNode;
					dEl.className = dEl.__defaultClassName ;
					dEl.__defaultClassName = undefined;
					this.releaseCapture();
				};
			};
			el.runtimeStyle.behavior = 'none';
			el.onmouseenter = behavior_onMouseEnter;
			el.onmouseleave = behavior_onMouseLeave;
		})(this));
}

Now define your buttons in any of following ways

// Simple anchor
<a class="button" href="#"><span>Your link Text</span></a>

//Form button
//For IE
<span class="button"><input name="foo" type="submit" value="yout text" /></span> 

// For Not IE (if browser is different)
<span class="button"><button>your text</button></span>

//Disabled Buttons
<del class="button"><span>your text</span></del>

Enjoy and have fun with your projects

Related posts

• Photoshop PSD to Website (Slicing) (0)
• jquery - Create a Simple hand coded accordion (3)
• How to make everything rounded corner with jQuery (6)
• Color Pickers for jQuery lovers (0)
• Best Web 2.0 Graphics Generators (0)

Comments

Leave a comment