CSS Buttons

Click on the buttons below to see play start animation.


PHP/HTML Source:
<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Buttons</title>
    <script src="raxan/startup.js" type="text/javascript"></script>
    <script type="text/javascript">
        /**
         * Button example with embedded javascript
         */

    	// include css and jquery scripts
        Raxan.css('master');
        Raxan.css('default/theme');	// load the default theme

        Raxan.include("jquery");
        Raxan.include("jquery-ui-effects");

		// bind to button click event
        Raxan.bind('.button','click',function(){
            var elm = $(this);
            if (!elm.hasClass('disabled')) {
            	elm.hide("explode");
            }
            elm.blur();
            return false;
        })

    </script>
</head>

<body >

<form class="container c30 pad">

    <div class="rax-box alert c20 ">
        <h4 class="box-title">About buttons</h4>
        <p>Buttons can be created by adding the button class to a &lt;button&gt; &lt;input type=&quot;button&quot;&gt; or &lt;a&gt; element.</p>
        <hr />
        <div align="right" class="pad">
            <input class="button ok" type="button" value="Save" />&nbsp;
            <button class="button cancel">Cancel</button>&nbsp;
            <a href="#" class="button">Continue</a>
        </div>
    </div>
    <br />
        <button class="button ok">Ok</button>&nbsp;
        <button class="button process">Process</button>&nbsp;
        <button class="button cancel">Cancel</button>&nbsp;
        <button class="button continue">Continue</button>&nbsp;
        <button class="button">Button</button>&nbsp;
        <button class="button disabled">Disabled</button>&nbsp;

</form>

</body>

</html>

Plugin Source:

HTML/JavaScript Source:

Data Source: