Documentation

Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxButtons.

jqxButton, jqxRepeatButton, jqxLinkButton and jqxToggleButton Style
jqx-button - applied to jqxButton's outer div element.
jqx-link - applied to the jqxLinkButton's anchor element.
jqx-fill-state-normal - applied to button when it's state is default/normal.
jqx-fill-state-hover - applied to button when it's state is hovered i.e the mouse cursor is over the button.
jqx-fill-state-pressed - applied to button when it's state is pressed i.e the mouse button is down.
jqx-fill-state-disabled - applied to button it is disabled.

When you create a custom style with colors and backgrounds for jqxButton, jqxRepeatButton, jqxLinkButton and jqxToggleButton, you need to do the following:

Add the above CSS classes related to jqxButtons
After each CSS class, add your theme name.
For example:
jqx-button-energyblue
To apply your custom style to jqxButtons, you need to set its 'theme' property(option) to point to your theme name string.
```
 $("#jqxButton").jqxButton({theme: 'energyblue', width: '150', height: '25'});
```

The sample below demonstrates how to set the 'Energy Blue' theme to jqxButtons.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery Button CSS Styling Sample</title>
    <meta name="keywords" content="jQuery, Button, Toggle Button, Repeat Button, Link Button, Help Documentation" /> 
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create Push Button.
                $("#jqxButton").jqxButton({theme: 'energyblue', width: '150', height: '25'});
                // Create Submit Button.
                $("#jqxSubmitButton").jqxButton({ theme: 'energyblue', width: '150', height: '25' });
                // Create Disabled Button
                $("#jqxDisabledButton").jqxButton({ theme: 'energyblue', disabled: true, width: '150', height: '25' });
                // Subscribe to Click events.
                $("#jqxButton").on('click', function () {
                    alert('Button Clicked');
                });
                $("#jqxSubmitButton").on('click', function () {
                    alert('Submit Button Clicked');
                });
            });
        </script>
        <div style='width: 150px;' id='jqxWidget'>
            <div>
                <input type="button" value="Button" id='jqxButton' />
            </div>
            <div>
                <input style='margin-top: 20px;' type="submit" value="Submit" id='jqxSubmitButton' />
            </div>
            <div>
                <input style='margin-top: 20px;' type="button" value="Disabled" id='jqxDisabledButton' />
            </div>
        </div>
    </div>
</body>
</html>

Documentation

Styling and Appearance

jqxButton, jqxRepeatButton, jqxLinkButton and jqxToggleButton Style