Asset 2Asset 5Asset 6Asset 3Asset 2 1Asset 4

Buttons

You have two button options and each may be modified with a different animation or usage of font family. Additional, we have two buttons available to use in the visual editor.

Visual editor screenshot

Select “Add Button” or “Add Secondary Button” to insert into your page.

Buttons

 

 

 

 

 

Primary Button:

Primary Button

This is the primary button style. We have this style available as a shortcode in the visual editor.


<!-- Primary Button with a bounce animation to the right and grey hover. -->
<a class="tcu-button tcu-button--primary tcu-bounce tcu-bounce--right--grey" href="#">Primary Button</a>

Primary Button

You can also change the animation direction to the left.


<!-- Primary Button with a bounce animation to the left and grey hover. -->
<a class="tcu-button tcu-button--primary tcu-bounce tcu-bounce--left--grey" href="#">Primary Button</a>

Cabin Font

In this example we have changed the font to be Cabin.


<!-- Primary Button with a bounce animation to the right and grey hover. -->
<a class="tcu-button tcu-button--primary tcu-bounce tcu-bounce--right--grey tcu-cabin" href="#">Cabin Font</a>

Read More

In this example we have added an icon to the button. Please refer to the icons page for detailed instructions on how to add icons to your site. Notice that we added custom inline-styles to the icon. You should move these styles into your own CSS file. In order to give the designer more options we have left the styling of the icons up to the developer.


<!-- Let's add an icon to our button -->
<a class="tcu-button tcu-button--primary tcu-bounce tcu-bounce--right--grey" href="#">Read More <svg style="fill: #FFFFFF; height: 30px; width: 30px; vertical-align: top;"><use xlink:href="#circle-next-arrow"></use></svg></a>

Secondary Button:

Secondary Button

Secondary button


<!-- Secondary Button with bounce animation to the left and grey hover -->
<a class="tcu-button tcu-button--secondary tcu-bounce tcu-bounce--right--grey" href="#">Secondary Button</a>

Moonface Font

In this example we have changed the font to be Moonface.


<!-- Moonface Font -->
<a class="tcu-button tcu-button--secondary tcu-bounce tcu-bounce--right--grey tcu-moonface" href="#">Moonface Font</a>

Secondary Button

In this example we have changed the animation direction to the left and the hover color to purple.


<!-- Secondary button with bounce animation to the left and purple hover -->
<a class="tcu-button tcu-button--secondary tcu-bounce tcu-bounce--left--purple" href="#">Secondary Button</a>