Buttons

[title text=”Custom Button Examples”]

[button text=”Button” type=”btn-custom” size=”btn-mini” url=”#” bg_color=”#1BC4DE” bg_hover_color=”#00b3ce” txt_color=”#ffffff” txt_hover_color=”#cef8ff”] [button text=”Button” type=”btn-custom” size=”btn-mini” url=”#” bg_color=”#EDBE00″ bg_hover_color=”#ed8b00″ txt_color=”#ffffff” txt_hover_color=”#fce155″] [button text=”Button” type=”btn-custom” size=”btn-mini” url=”http://themes.activetofocus.com” bg_color=”#F93A9D” bg_hover_color=”#F93A31″] [button text=”Button” type=”btn-custom” size=”btn-mini” url=”http://themes.activetofocus.com” bg_color=”#7ab80e” bg_hover_color=”#559500″] [button text=”Button” type=”btn-custom” size=”btn-mini” url=”http://themes.activetofocus.com” bg_color=”#f5002a” bg_hover_color=”#d60025″]

[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” size=”btn-small” url=”#” bg_color=”#EDBE00″ bg_hover_color=”#ed8b00″ txt_color=”#ffffff” txt_hover_color=”#fce155″] [button text=”Button” type=”btn-custom” size=”btn-small” url=”http://themes.activetofocus.com” bg_color=”#F93A9D” bg_hover_color=”#F93A31″] [button text=”Button” type=”btn-custom” size=”btn-small” url=”http://themes.activetofocus.com” bg_color=”#7ab80e” bg_hover_color=”#559500″] [button text=”Button” type=”btn-custom” size=”btn-small” url=”http://themes.activetofocus.com” bg_color=”#f5002a” bg_hover_color=”#d60025″]

[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” url=”#” bg_color=”#EDBE00″ bg_hover_color=”#ed8b00″ txt_color=”#ffffff” txt_hover_color=”#fce155″] [button text=”Button” type=”btn-custom” url=”http://themes.activetofocus.com” bg_color=”#F93A9D” bg_hover_color=”#F93A31″] [button text=”Button” type=”btn-custom” url=”http://themes.activetofocus.com” bg_color=”#7ab80e” bg_hover_color=”#559500″] [button text=”Button” type=”btn-custom” url=”http://themes.activetofocus.com” bg_color=”#f5002a” bg_hover_color=”#d60025″]

[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”] [button text=”Button” type=”btn-custom” size=”btn-large” url=”#” bg_color=”#EDBE00″ bg_hover_color=”#ed8b00″ txt_color=”#ffffff” txt_hover_color=”#fce155″] [button text=”Button” type=”btn-custom” size=”btn-large” url=”http://themes.activetofocus.com” bg_color=”#F93A9D” bg_hover_color=”#F93A31″] [button text=”Button” type=”btn-custom” size=”btn-large” url=”http://themes.activetofocus.com” bg_color=”#7ab80e” bg_hover_color=”#559500″] [button text=”Button” type=”btn-custom” size=”btn-large” url=”http://themes.activetofocus.com” bg_color=”#f5002a” bg_hover_color=”#d60025″]

[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)

Leave a Reply

Your email address will not be published. Required fields are marked *