Cool CSS Rounded corner buttons and links
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
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
it can work on submit buttons as well. Use the code written in last codebox its for submitt buttons.
Sorry, but the input button hover state does not work in FF. Any solution other than using the element? I am trying to avoid using that if I can. Thanks.
Hi I’m having the same problem with the code that J seems to have had…the right side of blue background for the IE Button does not appear when you hover over it. Is there a fix for this? Thanks for the great buttons!
I stumbled onto the problem myself and was mindboggled while debugging the CSS, however the sullution seems logical when you think of it. In the /*Hover Style*/ part of the css, be sure to re-add:
background-image:url(btn0.png);
Seems that this property is deleted for some reason in some hover states, might be the doctype aswell, anyway problem solved. In my case it was the left part of the button that did not show, 
Does not work in FireFox Mozilla