Buttons

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= »#FF5C00″ border_width= »1px » text_color= »#FF5C00″ 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= »#FF5C00″ border_color= »#FF5C00″ 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= »#59CCF2″ border_color= »#1C99C2″ 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= »#5EB840″ border_width= »2px » text_color= »#5EB840″ text_size= »18px » align= »right » target= »_self »]

[divider_top]

Expandable Buttons shortcode:
Large Button Example:

You can generate a button by using the following shortcode syntax (if style is not specified it defaults to dark):

Here’s another example with alignment ‘center’:

Here’s another example with longer text, ‘light’ style and ‘right’ alignment and the link opening in a new window:

Small Button Example:

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]

Round Button:

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]

« Read more » link with shortcode:

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

« Read more » link right aligned:

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]

Custom Button:

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= »#FF5C00″ 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= »#00ADEE » text_color= »#FFFFFF » align= »left » target= »_self »] [custom_button text= »Custom Button » title= »Custom Button » url= »#custom-btn-demo » size= »medium » bg_color= »#91BD09″ text_color= »#FFFFFF » align= »left » target= »_self »] [custom_button text= »Custom Button » title= »Custom Button » url= »#custom-btn-demo » size= »medium » bg_color= »#E62727″ text_color= »#FFFFFF » align= »left » target= »_self »] [custom_button text= »Custom Button » title= »Custom Button » url= »#custom-btn-demo » size= »medium » bg_color= »#FC0FC4″ 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= »#FF5C00″ 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= »#FF5C00″ 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= »#FF5C00″ 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= »#FF5C00″ text_color= »#FFFFFF » align= »left » target= »_self »]

[clear]

Right alignment:

[clear] [custom_button text= »Large Custom Button » title= »Large Custom Button » url= »#custom-btn-demo » size= »large » bg_color= »#FF5C00″ text_color= »#FFFFFF » align= »right » target= »_self »]

[clear]

Center alignment:

[clear] [custom_button text= »Centered Custom Button » title= »Centered Custom Button » url= »#custom-btn-demo » size= »large » bg_color= »#FF5C00″ text_color= »#FFFFFF » align= »center » target= »_self »]

[divider_top]