Jump to Table of Contents

Example: Styling elements with cssbutton

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

YUI's Button component was designed with the idea in mind that sometimes you may only want button styles, without the need for any JavaScript functionality. Instead of use('button', ...), you can just include the cssbutton module. This can be done dynamically with use('cssbutton'), or statically with a link tag.

<link rel="stylesheet" href="http://yui.yahooapis.com/3.8.0/build/cssbutton/cssbutton.css">

Source: HTML

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

Examples