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 »]
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]