Formatting: Button

About

Formatting Button is a quick HTML code format that can be used to create Buttons - (Demo).

Specification

Configuration

Description

skin

Button Skin. Choose one of the available options in Skin List.

box-type

Value	Description	Preview
solid	The skin configuration is used as the background
outline	The skin configuration is used as the border

rounded

Value	Description	Preview
yes	Rounded corners
no	Regular corners (square look)

full-width

Value	Description	Preview
yes	Full width
no	Auto width

size

Button Size.

Value	Description	Preview
small	Small
normal	Standard
medium	Medium
large	Large

formatting

By default, the system will process all BUTTON elements that placed in supports at data specification. By giving a value of no to this configuration, the respective BUTTON element will not be processed with formatting (it will use the browser's default style).

Usage

This formatting will process HTML BUTTON and other HTML that have the class w-button.
```
        
<button>
  My button
</button>

<br/>
<br/>

<a href='#' class='w-button'>
  My button
</a>    
        
        
```
My button
Note: The w-button class is only required if using tags other than BUTTON. In the HTML above, no configurations are added to either the BUTTON or A tags. All configurations will take the Default Value.

Add the desired configuration by adding the attribute

data-configuration-name='Value'.

        
<button data-skin='blue' data-box-type='solid'>
  My button
</button>