[title type=”icon” align=”left” line=’yes’ icon=”fa-star” color=”#ffffff” bg_color=”#cc3333″ value=’Custom Button Examples’ line_align=”bottom” uppercase=”no”]
[one]
[button text=”Button” icon=”fa-ticket” type=”btn-custom” size=”btn-xs” url=”#” bg_color=”#1BC4DE” bg_hover_color=”#00b3ce” txt_color=”#ffffff” txt_hover_color=”#cef8ff”]
[button text=”Button” type=”btn-custom” size=”btn-xs” url=”#” bg_color=”#EDBE00″ bg_hover_color=”#ed8b00″ txt_color=”#ffffff” txt_hover_color=”#fce155″]
[button text=”Button” type=”btn-custom” size=”btn-xs” url=”http://themes.activetofocus.com” bg_color=”#F93A9D” bg_hover_color=”#F93A31″]
[button text=”Button” type=”btn-custom” size=”btn-xs” url=”http://themes.activetofocus.com” bg_color=”#7ab80e” bg_hover_color=”#559500″]
[button text=”Button” type=”btn-custom” size=”btn-xs” url=”http://themes.activetofocus.com” bg_color=”#f5002a” bg_hover_color=”#d60025″]
[/one]
[space size=”small”]
[one]
[button text=”Button” icon=”fa-flag” type=”btn-custom” size=”btn-sm” url=”#” bg_color=”#1BC4DE” bg_hover_color=”#00b3ce” txt_color=”#ffffff” txt_hover_color=”#cef8ff”]
[button text=”Button” type=”btn-custom” size=”btn-sm” url=”#” bg_color=”#EDBE00″ bg_hover_color=”#ed8b00″ txt_color=”#ffffff” txt_hover_color=”#fce155″]
[button text=”Button” type=”btn-custom” size=”btn-sm” url=”http://themes.activetofocus.com” bg_color=”#F93A9D” bg_hover_color=”#F93A31″]
[button text=”Button” type=”btn-custom” size=”btn-sm” url=”http://themes.activetofocus.com” bg_color=”#7ab80e” bg_hover_color=”#559500″]
[button text=”Button” type=”btn-custom” size=”btn-sm” url=”http://themes.activetofocus.com” bg_color=”#f5002a” bg_hover_color=”#d60025″]
[/one]
[space size=”small”]
[one]
[button text=”Button” icon=”fa-unlink” 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″]
[/one]
[space size=”small”]
[one]
[button text=”Button” icon=”fa-flag” type=”btn-custom” size=”btn-lg” url=”#” bg_color=”#1BC4DE” bg_hover_color=”#00b3ce” txt_color=”#ffffff” txt_hover_color=”#cef8ff”]
[button text=”Button” type=”btn-custom” size=”btn-lg” url=”#” bg_color=”#EDBE00″ bg_hover_color=”#ed8b00″ txt_color=”#ffffff” txt_hover_color=”#fce155″]
[button text=”Button” type=”btn-custom” size=”btn-lg” url=”http://themes.activetofocus.com” bg_color=”#F93A9D” bg_hover_color=”#F93A31″]
[button text=”Button” type=”btn-custom” size=”btn-lg” url=”http://themes.activetofocus.com” bg_color=”#7ab80e” bg_hover_color=”#559500″]
[button text=”Button” type=”btn-custom” size=”btn-lg” url=”http://themes.activetofocus.com” bg_color=”#f5002a” bg_hover_color=”#d60025″]
[/one]
[space]
[title type=”icon” align=”left” line=’yes’ icon=”fa-code” color=”#ffffff” bg_color=”#cc3333″ value=’More Default Button Type for You’ line_align=”bottom” uppercase=”no”]
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 |
[space]
[title type=”icon” align=”left” line=’yes’ icon=”fa-code” color=”#ffffff” bg_color=”#cc3333″ value=’Custom Button Shortcode’ line_align=”bottom” uppercase=”no”]
[button text="Button" icon="fa-flag" type="btn-custom" size="btn-lg/btn-sm/btn-xs" url="#" bg_color="#1BC4DE" bg_hover_color="#00b3ce" txt_color="#ffffff" txt_hover_color="#cef8ff"]