In this example, we'll look at a few ways to use the 'cssbutton' module to enhance the look & feel of the default browser buttons.
Source: HTML
<!-- Include the cssbutton stylesheet -->
<link ref="stylsheet" href="http://yui.yahooapis.com/3.5.1/build/cssbutton/cssbutton.css">
<h4>Button Tags</h4>
<button class='yui3-button'><button></button>
<input type='button' class='yui3-button' value='<input type="button">'>
<input type='submit' class='yui3-button' value='<input type="submit">'>
<h4>Other Tags</h4>
<div class='yui3-button'><div></div>
<span class='yui3-button'><span></span>
<a class='yui3-button'><a></a>
<h4>Colors</h4>
<button class='yui3-button success'>.success <br> #57A957</button>
<button class='yui3-button warning'>.warning <br> #FAF55F</button>
<button class='yui3-button error'>.error <br> #C43C35</button>
<button class='yui3-button notice'>.notice <br> #1B7AE0</button>
<h4>Icon Buttons</h4>
<button class='yui3-button'>
<span class='yui3-button-icon yui3-button-icon-bold'></span>
</button>
<button class='yui3-button'>
<span class='yui3-button-icon yui3-button-icon-italic'></span>
</button>
<button class='yui3-button'>
<span class='yui3-button-icon yui3-button-icon-underline'></span>
</button>
<h4>Image Button</h4>
<input type='image' id='imageButton' class='yui3-button' src="../assets/button/yui-logo.png"></input>
Source: CSS
.yui3-button {
margin:3px;
}
.warning{
background-color:#FAF55F;
}
.success{
background-color:#57A957;
color:white;
}
.error{
background-color:#C43C35;
color:white;
}
.notice{
background-color:#1B7AE0;
color:white;
}
.yui3-button-icon {
background-image: url("../assets/button/icon-sprite-dark-and-light-24.png");
background-repeat: no-repeat;
display: inline-block;
height: 20px;
vertical-align: middle;
width: 20px;
}
.yui3-button-icon-bold {
background-position: 1px 1px;
}
.yui3-button-icon-italic {
background-position: 1px -35px;
}
.yui3-button-icon-underline {
background-position: 1px -71px;
}