Power Button CSS API Reference

All Common CSS variables:

    Specific CSS variables for Power Button styling:

    • --smart-power-button-default-width: PowerButton's default width.
    • --smart-power-button-default-height: PowerButton's default height.

    The following CSS selectors can be used to style Power Button:

    • smart-power-button - the element itself. Can be used to set width and height for the whole element.
      • .smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
        • .smart-animation - used for animation purposes.
        • .smart-input - an HTML Span element used to hold the power icon.

    Demo

    <style>
            #powerbutton{
                --smart-power-button-default-width: 80px;
                --smart-power-button-default-height: 80px;
            }
    </style>