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)

BUSCANOS EN TWITTER


Visit Us On TwitterVisit Us On FacebookVisit Us On PinterestVisit Us On YoutubeVisit Us On LinkedinVisit Us On Instagram