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