Buttons

Custom Button Examples

Button Button Button Button Button
[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 Button Button Button Button
[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 Button Button Button Button
[button text="Button" type="btn-custom" url="#" bg_color="#1BC4DE" bg_hover_color="#00b3ce" txt_color="#ffffff" txt_hover_color="#cef8ff"]
Button Button Button Button Button
[button text="Button" type="btn-custom" size="btn-large" url="#" bg_color="#1BC4DE" bg_hover_color="#00b3ce" txt_color="#ffffff" txt_hover_color="#cef8ff"]

Button Types

Buttontype=””Description
Standard gray button with gradient
Custombtn-customProvides 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-primaryProvides extra visual weight and identifies the primary action in a set of buttons
btn-infoUsed as an alternative to the default styles
btn-successIndicates a successful or positive action
btn-warningIndicates caution should be taken with this action
btn-dangerIndicates a dangerous or potentially negative action
btn-inverseAlternate dark gray button, not tied to a semantic action or use
btn-linkDeemphasize a button by making it look like a link while maintaining button behavior

Button Shortcode

[button text="" type="" size="" url="" target="" bg_color="" bg_hover_color="" txt_color="" txt_hover_color=""]
ParamsDefaultPossible ValuesDescription
textThe button text
typebtn-primary , btn-info , btn-success , btn-warning , btn-danger , btn-inverse , btn-link , btn-customThe button type. If you need disabled button and add extra “disabled” , for example: btn-custom disabled
size  btn-large , btn-small , btn-miniThe button size
url#The button click open link
target_blank_self , _blankThe button link target window
bg_color#HEX_NUMBER like #ffffffThe button background color (Valid for Custom Type)
bg_hover_color#HEX_NUMBER like #ffffffThe button background hover color (Valid for Custom Type)
txt_color#HEX_NUMBER like #ffffffThe button text color (Valid for Custom Type)
txt_hover_color#HEX_NUMBER like #ffffffThe button text hover color (Valid for Custom Type)