+254 (020) 3316099
 
Friday, April 26, 2019

Button designs

NORMAL BUTTONS

This is a big button This is a big yellow button This is a big red button This is a big green button This is a big blue button 

Shortcode:

[big-button color="yellow" link="http://www.website.com/"]This is a big yellow button[/big-button] [big-button link="http://www.website.com/"]This is a big button[/big-button]

You can also use straight css class like .big-button (for making it big) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="big-button yellow">This is a big yellow button</a>
Medium blue button Green medium rounded button Default medium button

Shortcode:

[medium-button color="blue" link="http://www.website.com/"]This is a medium <strong>blue</strong> button[/medium-button] [medium-button color="green" link="http://www.website.com/" rounded="yes"]This is a medium <strong>green</strong> button[/medium-button] [medium-button link="http://www.website.com/"]This is a default medium button[/medium-button]

You can also use straight css class like .medium-button (for making it medium) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="medium-button yellow">This is a medium yellow button</a>
Small blue button Green small button Small red button Default small button Small orange button Small lightblue button Small purple button Small turqoise button Small darkred button Small green-lemon button

Shortcode:

[small-button color="blue" link="http://www.website.com/"]This is a small blue button[/small-button] [small-button color="green" link="http://www.website.com/"]This is a small green button[/small-button] [small-button color="red" link="http://www.website.com/"]This is a small red button[/small-button] [small-button link="http://www.website.com/"]This is a default small button[/small-button]

You can also use straight css class like .big-button (for making it big) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="small-button yellow">This is a small yellow button</a>

 

NICE BUTTONS

This is a big button This is a big yellow button This is a big red button This is a big green button This is a big blue button 

Shortcode:

[big-button color="yellow" link="http://www.website.com/" type=" nice "]This is a big yellow button[/big-button][big-button link="http://www.website.com/" type=" nice "]This is a big button[/big-button]

You can also use straight css class like .big-button (for making it big) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="big-button yellow">This is a big yellow button</a>
Medium blue button Green medium button Default medium button

Shortcode:

[medium-button color="blue" link="http://www.website.com/" type=" nice "]This is a medium <strong>blue</strong> button[/medium-button] [medium-button color="green" link="http://www.website.com/" type=" nice "]This is a medium <strong>green</strong> button[/medium-button] [medium-button link="http://www.website.com/" type=" nice "]This is a default medium button[/medium-button]

You can also use straight css class like .medium-button (for making it big) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="medium-button yellow">This is a medium yellow button</a>
Small blue button Green small button Small red button Default small button

Shortcode:

[small-button color="blue" link="http://www.website.com/" type=" nice "]This is a small blue button[/small-button] [small-button color="green" link="http://www.website.com/" type=" nice "]This is a small green button[/small-button] [small-button color="red" link="http://www.website.com/" type=" nice " rounded="yes"]This is a small red rounded button[/small-button] [small-button link="http://www.website.com/" type=" nice "]This is a default small button[/small-button]

You can also use straight css class like .small-button (for making it big) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="small-button yellow">This is a small yellow button</a>

 

PSEUDO BUTTONS

This is a big blue pseudo button 

This is a medium lightblue pseudo button 

This is a medium lightblue pseudo button 

 

CUSTOM BUTTONS

The shortcode for buttons:

[button link="" title="" style="1" or style="2" rounded="yes"][/button]

 

The below examples have the style="1" to the shortcode:

Pellentesque  Vestibulum  condimentum sed

 

The below examples have the style="2" to the shortcode:

Pellentesque  Vestibulum  condimentum sed

 

Scroll to top