Button

Summary

The Button control allows a user to click it to perform an action, and can display both text and images. A button can have default, hover and pressed states, which are styled in 3 different ways.

Usage

A Button control may be added to a template under Property Window >> Add Control >> Button in Themler or in the admin section of CMSs.

The Button control, like some other controls in a template, has a default style which can be customized under Property Window >> Default Styles >> Forms. This style is applied to any button used in the template. Once a button is clicked in the Preview Area, the Property Window outputs properties of the Button control for customization.

Also, it is possible to specify a unique style for any Button in the template. Click the specific button that you want to modify in Preview Area - in the Property Window you'll see properties specific for this button. Selected settings will be applied to the selected button only.

Here are some samples of buttons added to the template and styled separately:

Additionally, it is possible to style Button control placed into a Block under Typography Style >> Forms >> Button. The styling specified here will be applied to buttons located only inside blocks.

When creating or editing a button, you may select an existing button design from the presets list and modify it later, or you may design a custom button. Options which could be specified for a button under the Button tab also include Type option.
Type option may be set to Button or Bootstrap Button

With type set to Button, the standard HTML button is created, e.g.:

<input type="submit" name="Submit" class="btn btn-primary" value="Log out">

With the Bootstrap Button type you get Bootstrap button. In page's source code it looks like:

<a href="/" class="data-control-id-754457 bd-linkbutton-4 btn   btn-success bd-icon-15">Button</a>

Actually, an HTML link with specific settings is created. In general, Bootstrap buttons are used on mobile versions of a website, however they can be used for Desktop website modes as well. You may read more about Bootstraps buttons at http://www.tutorialspoint.com/bootstrap/bootstrap_buttons.htm.

Button and Bootstrap buttons have different settings. The screenshots provided above are specific for Button type.
The Bootstrap Button settings also include Style and Size options described in the article http://www.tutorialspoint.com/bootstrap/bootstrap_buttons.htm

Notes:
- If Bootstrap Button type is set to Default Button, the button cannot be accessed and styled via Styles >> Forms.
- Buttons located inside Blocks cannot be converted to Bootstrap Buttons.

There are several options for the Button controls which require highlights:
1.'Reset to Default' and 'Set as Default' options appear after anything is changed in a button's settings, for example after selecting border, background, change font, change button type, etc.

2.Under the Hyperlink tab of the Button options, you may specify Relationship option. This option specifies button's functionality, for example Search, Next. etc. It adds the "rel" attribute to <a> tag, e.g.

<a href="http://google.com" class="data-control-id-436810 bd-linkbutton-1 bd-button" rel="alternate">Button</a>

The rel attribute is supported in all major browsers. Note: Browsers do not use this attribute in any way. However, search engines can use this attribute to get more information about a link. You may read more about Relationship values at http://www.w3schools.com/Tags/att_a_rel.asp

###Summary The **Button** control allows a user to click it to perform an action, and can display both text and images. A button can have default, hover and pressed states, which are styled in 3 different ways. ###Usage A **Button** control may be added to a template under **Property Window** >> **Add Control** >> **Button** in Themler or in the admin section of CMSs. The **Button** control, like some other controls in a template, has a default style which can be customized under **Property Window** >> **Default Styles** >> **Forms**. This style is applied to any button used in the template. Once a button is clicked in the Preview Area, the Property Window outputs properties of the **Button** control for customization. !DefaultButton.png! Also, it is possible to specify a unique style for any **Button** in the template. Click the specific button that you want to modify in Preview Area - in the Property Window you'll see properties specific for this button. Selected settings will be applied to the selected button only. Here are some samples of buttons added to the template and styled separately: !DifferentButtonControls.png! Additionally, it is possible to style **Button** control placed into a Block under **Typography Style** >> **Forms** >> **Button**. The styling specified here will be applied to buttons located only inside blocks. !TypographyStylesStep1.png! When creating or editing a button, you may select an existing button design from the presets list and modify it later, or you may design a custom button. Options which could be specified for a button under the Button tab also include Type option. Type option may be set to *Button* or *Bootstrap Button* With type set to *Button*, the standard HTML button is created, e.g.: <input type="submit" name="Submit" class="btn btn-primary" value="Log out"> With the *Bootstrap Button* type you get Bootstrap button. In page's source code it looks like: <a href="/" class="data-control-id-754457 bd-linkbutton-4 btn btn-success bd-icon-15">Button</a> Actually, an HTML link with specific settings is created. In general, *Bootstrap buttons* are used on mobile versions of a website, however they can be used for Desktop website modes as well. You may read more about Bootstraps buttons at http://www.tutorialspoint.com/bootstrap/bootstrap_buttons.htm. *Button* and *Bootstrap buttons* have different settings. The screenshots provided above are specific for Button type. The *Bootstrap Button* settings also include Style and Size options described in the article http://www.tutorialspoint.com/bootstrap/bootstrap_buttons.htm **Notes:** - If *Bootstrap Button* type is set to **Default Button**, the button cannot be accessed and styled via **Styles** >> **Forms**. - Buttons located inside Blocks cannot be converted to *Bootstrap Buttons*. There are several options for the **Button** controls which require highlights: 1.'Reset to Default' and 'Set as Default' options appear after anything is changed in a button's settings, for example after selecting border, background, change font, change button type, etc. 2.Under the Hyperlink tab of the Button options, you may specify *Relationship* option. This option specifies button's functionality, for example Search, Next. etc. It adds the "rel" attribute to `<a>` tag, e.g. <a href="http://google.com" class="data-control-id-436810 bd-linkbutton-1 bd-button" rel="alternate">Button</a> The rel attribute is supported in all major browsers. Note: Browsers do not use this attribute in any way. However, search engines can use this attribute to get more information about a link. You may read more about Relationship values at http://www.w3schools.com/Tags/att_a_rel.asp ### See Also [Button Shortcode](page:3682)