January 14

Buttons Example

0  comments

These "DFY" Done-For-You Website Templates come with a variety of Attention-Grabbing Buttons you can use anywhere in your content. A must-have for Sales Pages and anywhere else where you want to make that Click Extra Enticing! The buttons are all CSS-only for maximum performance and each has a hover and pressed state, for the best possible user feedback.

Try them out...Hover over any button and notice how the color changes and ​then Press the button and notice how the Button Color Changes when you press the button.

Buttons Colors

Buttons come in the following 8 colors below and hopefully you'll soon have more color options.

[thrive_link color=”blue” link=”” target=”_self” size=”big” align=”aligncenter”]Button Text[/thrive_link]

[thrive_link color=”green” link=”” target=”_self” size=”big” align=”aligncenter”]Button Text[/thrive_link]

[thrive_link color=”red” link=”” target=”_self” size=”big” align=”aligncenter”]Button Text[/thrive_link]

[thrive_link color=”purple” link=”” target=”_self” size=”big” align=”aligncenter”]Button Text[/thrive_link]

[thrive_link color=”orange” link=”” target=”_self” size=”big” align=”aligncenter”]Button Text[/thrive_link]

[thrive_link color=”teal” link=”” target=”_self” size=”big” align=”aligncenter”]Button Text[/thrive_link]

[thrive_link color=”light” link=”” target=”_self” size=”big” align=”left”]More Button Text Than Usual[/thrive_link]

[thrive_link color=”dark” link=”” target=”_self” size=”big” align=”right”]More Button Text Than Usual[/thrive_link]


Button Sizes

You also have three button sizes to choose from:

[thrive_link color=”green” link=”” target=”_self” size=”small” align=”aligncenter”]Small Button[/thrive_link]

[thrive_link color=”green” link=”” target=”_self” size=”medium” align=”aligncenter”]Medium Button[/thrive_link]

[thrive_link color=”green” link=”” target=”_self” size=”big” align=”aligncenter”]Large Button[/thrive_link]


More Button Options

For each button, you can also set an alignment (left, right, center) or even make the button span the full width of it’s container. That means it can look like this:

[thrive_link color=”red” link=”http://buildmyfirstwebsite.org/shortcodes/buttons-example/” target=”_self” size=”big” align=”left”]Left Align[/thrive_link]

[thrive_link color=”orange” link=”http://buildmyfirstwebsite.org/shortcodes/buttons-example/” target=”_self” size=”big” align=”aligncenter”]Center Align[/thrive_link]

[thrive_link color=”green” link=”big” target=”_self” size=”big” align=”right”]Right Align[/thrive_link]

[thrive_link color=”dark” link=”” target=”_self” size=”big” align=”full”]I’m a Very, Very Wide Button![/thrive_link]


Or a Button can be contained in a column. For example, you can have three buttons in three columns that are all the same width, even if they have different button texts:

[thrive_link color=”red” link=”” target=”_self” size=”big” align=”full”]More Button Text[/thrive_link]

[thrive_link color=”red” link=”” target=”_self” size=”big” align=”full”]Less Text[/thrive_link]

[thrive_link color=”red” link=”” target=”_self” size=”big” align=”full”] ![/thrive_link]

Code Example

A usual button short code looks something like this:

[code][thrive_link color=’blue’ link=’#’ target=’_self’ size=’medium’ align=’aligncenter’]Button Text[/thrive_link][/code]


Combination Example

Of course, buttons can be combined with various other short codes to create all kinds of awesome elements. For example, here’s a "CTA" Call To Action box created by using a combination of Content Box Short Code and a Button Short Code.

[thrive_text_block color=’dark’ headline=’Some Catchy Headline Goes Here!’] [three_fourth_first]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta orci a interdum ullamcorper donec tempus.[/three_fourth_first][one_fourth_3_last][thrive_link color=’orange’ link=’#’ target=’_self’ size=’big’ align=’aligncenter’]Get the Deal![/thrive_link][/one_fourth_3_last][/thrive_text_block]

This is how the HTML Code looks that created the button above.

Enter HTML Code here


Tags


You may also like

TCB Custom HTML Element

TCB Credit Card Icons Example

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Subscribe to our newsletter now!