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