[title text=”Custom Button Examples”]
[button text="Button" type="btn-custom" size="btn-mini" url="#" bg_color="#1BC4DE" bg_hover_color="#77D1F4" txt_color="#ffffff" txt_hover_color="#42788E"]
[button text="Button" type="btn-custom" size="btn-small" url="#" bg_color="#1BC4DE" bg_hover_color="#00b3ce" txt_color="#ffffff" txt_hover_color="#cef8ff"]
[button text="Button" type="btn-custom" url="#" bg_color="#1BC4DE" bg_hover_color="#00b3ce" txt_color="#ffffff" txt_hover_color="#cef8ff"]
[button text="Button" type="btn-custom" size="btn-large" url="#" bg_color="#1BC4DE" bg_hover_color="#00b3ce" txt_color="#ffffff" txt_hover_color="#cef8ff"]
[title text=”Button Types”]
| Button | type=”” | Description |
|---|---|---|
| Standard gray button with gradient | ||
| Custom | btn-custom |
Provides custom text and background color for buttons.Here you need setting bg_color , bg_hover_color , txt_color , txt_hover_color params value , other type don’t need. |
btn-primary |
Provides extra visual weight and identifies the primary action in a set of buttons | |
btn-info |
Used as an alternative to the default styles | |
btn-success |
Indicates a successful or positive action | |
btn-warning |
Indicates caution should be taken with this action | |
btn-danger |
Indicates a dangerous or potentially negative action | |
btn-inverse |
Alternate dark gray button, not tied to a semantic action or use | |
btn-link |
Deemphasize a button by making it look like a link while maintaining button behavior |
[title text=”Button Shortcode”]
[button text="" type="" size="" url="" target="" bg_color="" bg_hover_color="" txt_color="" txt_hover_color=""]
| Params | Default | Possible Values | Description |
|---|---|---|---|
| text | The button text | ||
| type | ” | btn-primary , btn-info , btn-success , btn-warning , btn-danger , btn-inverse , btn-link , btn-custom |
The button type |
| size | ” | btn-large , btn-small , btn-mini |
The button size |
| url | # | The button click open link | |
| target | _blank | _self , _blank |
The button link target window |
| bg_color | #HEX_NUMBER like #ffffff |
The button background color (Valid for Custom Type) | |
| bg_hover_color | #HEX_NUMBER like #ffffff |
The button background hover color (Valid for Custom Type) | |
| txt_color | #HEX_NUMBER like #ffffff |
The button text color (Valid for Custom Type) | |
| txt_hover_color | #HEX_NUMBER like #ffffff |
The button text hover color (Valid for Custom Type) |