#

Jump to Table of Contents

# Example: Enhancing <button> nodes with button-plugin

In this example, we'll look at a few ways to create buttons using the `'button-plugin'` module, and use the `'cssbutton'` module for basic styles.

This example uses 3 different ways of creating plugged node elements. Choose the one you are most comfortable with.

#### Source: HTML

Note: be sure to add the `yui3-skin-sam` classname to the page's `<body>` element or to a parent element of the widget in order to apply the default CSS skin. See Understanding Skinning.

    <body class="yui3-skin-sam"> <!-- You need this skin class -->

    <button id="myButton">A simple push button</button>

    <button id="myEventButton">Toggle 'disabled' state of >></button>

    <button id="myDisabledButton">Disabled</button>

#### Source: JavaScript

    YUI().use('button-plugin', 'cssbutton', function(Y){

        // A basic push button
        Y.one('#myButton').plug(Y.Plugin.Button);

        // A disabled button
        var disabledButton = Y.one('#myDisabledButton');
        disabledButton.plug(Y.Plugin.Button, {
            disabled: true
        });

        disabledButton.on('click', function(){
            var label = this.get('label');
            alert("My label is '"  + label + "'");
        });

        // An event button, listening for a click
        var eventButton = Y.Plugin.Button.createNode({
            srcNode:'#myEventButton'
        });

        eventButton.on('click', function(){
            var disabled = disabledButton.get('disabled'),
                newLabel = disabled ? 'Not disabled' : 'Disabled';

            disabledButton.set('label', newLabel).set('disabled', !disabled);
        });
    });