Example: Styling elements with cssbutton

Jump to Table of Contents

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.

Button Tags

Other Tags

<div>
<span> <a>

Colors

Icon Buttons

Image Button

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'>&lt;button&gt;</button>
<input type='button' class='yui3-button' value='&lt;input type="button"&gt;'>
<input type='submit' class='yui3-button' value='&lt;input type="submit"&gt;'>

<h4>Other Tags</h4>
<div class='yui3-button'>&lt;div&gt;</div>
<span class='yui3-button'>&lt;span&gt;</span>
<a class='yui3-button'>&lt;a&gt;</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;
}