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

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

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. If you need disabled button and add extra “disabled” , for example: btn-custom disabled
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)

APABANC TE ASESORA GRATUITAMENTE. ÚNETE

SÍGUENOS EN TWITTER

SÍGUENOS EN FACEBOOK