# Gradient Push Button Example

An example of using style sheets to create a gradient PushButton.

Tip

To see this example in action, download it from `gradient_push_button` and run:

    $ enaml-run gradient_push_button.enaml

## Screenshot

## Example Enaml Code

    #------------------------------------------------------------------------------
    #  Copyright (c) 2013-2025, Nucleic Development Team
    #
    # Distributed under the terms of the Modified BSD License.
    #
    # The full license is in the file LICENSE, distributed with this software.
    #------------------------------------------------------------------------------
    """ An example of using style sheets to create a gradient PushButton.

    << autodoc-me >>
    """
    from enaml.widgets.api import Window, Container, PushButton
    from enaml.styling import StyleSheet, Style, Setter

    enamldef GradientButtonSheet(StyleSheet):
        Style:
            element = 'PushButton'
            style_class = 'gradient-button'
            Setter:
                field = 'background'
                value = ('lineargradient(x1: 0, y1:0, x2:0, y2:1, '
                            'stop: 0 #5CA9FA, stop: 0.49 #4790DE, '
                            'stop: 0.50 #2C82DE, stop: 1 #045CBA)')
            Setter:
                field = 'border'
                value = '1px solid #034994'
            Setter:
                field = 'padding'
                value = '5px'
            Setter:
                field = 'color'
                value = 'white'
        Style:
            element = 'PushButton'
            style_class = 'gradient-button'
            pseudo_class = 'hover'
            Setter:
                field = 'border'
                value = '1px solid #007BFF'
        Style:
            element = 'PushButton'
            style_class = 'gradient-button'
            pseudo_class = 'pressed'
            Setter:
                field = 'background'
                value = ('lineargradient(x1: 0, y1:0, x2:0, y2:1, '
                            'stop: 0 #166BC7, stop: 1 #2C82DE)')
        Style:
            style_class = 'large-font'
            Setter:
                field = 'font'
                value = '14pt Verdana'
        Style:
            style_class = 'rounded'
            Setter:
                field = 'border-radius'
                value = '5px'

    enamldef Main(Window):
        title = 'Gradient Button'
        GradientButtonSheet:
            pass
        Container:
            PushButton:
                text = 'Gradient Button'
                style_class = 'gradient-button large-font'
            PushButton:
                text = 'Rounded Button'
                style_class = 'gradient-button large-font rounded'