#

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.10.3/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;
    }