Any size any color! Fully Customizable Flat Button:
With the flat button shortcode you create various button sizes by simply adjusting the padding and font size. Here’s some examples:
[clear]
[flat_button text=»READ MORE…» title=»Flat Button» url=»#flat-btn-demo» padding=»10px 20px» bg_color=»transparent» border_color=»#1AAABA» border_width=»1px» text_color=»#1AAABA» text_size=»10px» align=»left» target=»_self»]
[clear]
[flat_button text=»Read more…» title=»Flat Button» url=»#flat-btn-demo» padding=»14px 36px» bg_color=»#ED9F00″ border_color=»#ED9F00″ border_width=»1px» text_color=»#FFFFFF» text_size=»14px» align=»center» target=»_self»]
[clear]
[flat_button text=»Read more…» title=»Flat Button» url=»#flat-btn-demo» padding=»20px 60px» bg_color=»#1AAABA» border_color=»#1AAABA» border_width=»2px» text_color=»#FFFFFF» text_size=»20px» align=»right» target=»_self»]
[clear]
[flat_button text=»READ MORE…» title=»Flat Button» url=»#flat-btn-demo» padding=»30px 110px» bg_color=»transparent» border_color=»#BF6672″ border_width=»2px» text_color=»#BF6672″ text_size=»18px» align=»left» target=»_self»]
[divider_top]
Expandable Buttons shortcode:
You can generate a button by using the following shortcode syntax (if style is not specified it defaults to dark):
[button text=»Cool Button…» title=»Cool Button» url=»#exp-btns-demo» align=»left»]
Here’s another example with alignment ‘center’:
[button text=»Centered Button…» title=»Centered Button…» style=»light» url=»#exp-btns-demo» align=»center» target=»_self»]
Here’s another example with longer text, ‘light’ style and ‘right’ alignment and the link opening in a new window:
[button text=»Looooooooooong Button…» title=»Looooooooooong Button…» style=»light» url=»#exp-btns-demo» align=»right» target=»_blank»]
You can generate a button by using the following shortcode syntax (if style is not specified it defaults to dark):
[small_button text=»Cool Button…» title=»Cool Button» url=»#exp-btns-demo» align=»left»]
Here’s another example of ‘light’ style and ‘right’ alignment and the link opening in a new window:
[small_button style=»light» text=»Cool Button…» title=»Cool Button…» url=»#exp-btns-demo» align=»right» target=»_blank»]
[/code]
You can generate a round button by using the following shortcode syntax (if style is not specified it defaults to dark), also a target can be specified by adding target="_blank" to open the link in s a new window:
[round_button text=»Round Button…» style=»light» title=»Round Button» url=»#exp-btns-demo» align=»left» target=»_blank»]
[divider_top]
You can generate a «Read more» link as seen in this demos site by using the following shortcode syntax:
[read_more text=»Read more» title=»Read More…» url=»#read-more-btn-demo» align=»left» target=»_self»]
You can generate a «Read more» link, this time «right» aligned by using the following shortcode syntax:
[read_more text=»Read more» title=»Read More…» url=»#read-more-btn-demo» align=»right» target=»_self»]
[divider_top]
You can pick the colors, size and alignment of your button.
To generate a custom button use the following shortcode syntax:
[clear]
[custom_button text=»Custom Button» title=»Custom Button» url=»#custom-btn-demo» size=»medium» bg_color=»#83CACA» text_color=»#FFFFFF» align=»left» target=»_self»] [custom_button text=»Custom Button» title=»Custom Button» url=»#custom-btn-demo» size=»medium» bg_color=»#333333″ text_color=»#FFFFFF» align=»left» target=»_self»] [custom_button text=»Custom Button» title=»Custom Button» url=»#custom-btn-demo» size=»medium» bg_color=»#666666″ text_color=»#FFFFFF» align=»left» target=»_self»] [custom_button text=»Custom Button» title=»Custom Button» url=»#custom-btn-demo» size=»medium» bg_color=»#FFFFFF» text_color=»#333333″ align=»left» target=»_self»] [custom_button text=»Custom Button» title=»Custom Button» url=»#custom-btn-demo» size=»medium» bg_color=»#FE5F5B» text_color=»#FFFFFF» align=»left» target=»_self»] [custom_button text=»Custom Button» title=»Custom Button» url=»#custom-btn-demo» size=»medium» bg_color=»#BF6672″ text_color=»#ffffff» align=»left» target=»_self»] [custom_button text=»Custom Button» title=»Custom Button» url=»#custom-btn-demo» size=»medium» bg_color=»#EC8901″ text_color=»#FFFFFF» align=»left» target=»_self»] [custom_button text=»Custom Button» title=»Custom Button» url=»#custom-btn-demo» size=»medium» bg_color=»#ABDFD0″ text_color=»#FFFFFF» align=»left» target=»_self»]
[clear]
The «size» options are: ‘small’, ‘medium’, ‘large’ and ‘x-large’:
[clear] [custom_button text=»X-Large Custom Button» title=»X-Large Custom Button» url=»#custom-btn-demo» size=»x-large» bg_color=»#1AAABA» text_color=»#FFFFFF» align=»left» target=»_self»]
[clear]
[custom_button text=»Large Custom Button» title=»Large Custom Button» url=»#custom-btn-demo» size=»large» bg_color=»#1AAABA» text_color=»#FFFFFF» align=»left» target=»_self»]
[clear]
[custom_button text=»Medium Custom Button» title=»Medium Custom Button» url=»#custom-btn-demo» size=»medium» bg_color=»#1AAABA» text_color=»#FFFFFF» align=»left» target=»_self»]
[clear]
[custom_button text=»Small Custom Button» title=»Small Custom Button» url=»#custom-btn-demo» size=»small» bg_color=»#1AAABA» text_color=»#FFFFFF» align=»left» target=»_self»]
[clear]
[divider_top]