Menu

Designed for the buttons inside the articles or custom type HTML Joomla! modules, the button styles offer size and color customization and adapt to every background type (light, clear, dark and color).

Button Styles

This is the button element. The button style provided by this template is:

To use it, insert the following code into your text editor:

<button class="favth-btn">...</button>

If you want to use the button with a link:

Button link

<a class="favth-btn" href="#">...</a>

Button + light

The button style adapts for every background type provided by our templates:

Button + clear/dark

The button style adapts for every background type provided by our templates:

Button + color

The button style adapts for every background type provided by our templates:

Sizes and colors for the buttons

Each button style can be further customized with additional sizes and colors:

Button Sizes

This is the large button size. To use it, insert the following code into your text editor:

<button class="favth-btn favth-btn-large">...</button>

This is the default button size. To use it, insert the following code into your text editor:

<button class="favth-btn">...</button>

This is the small button size. To use it, insert the following code into your text editor:

<button class="favth-btn favth-btn-small">...</button>

This is the mini button size. To use it, insert the following code into your text editor:

<button class="favth-btn favth-btn-mini">...</button>

Button Colors

This is the favth-btn-info button element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="favth-btn favth-btn-info">...</button>

This is the favth-btn-success button element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="favth-btn favth-btn-success">...</button>

This is the favth-btn-warning button element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="favth-btn favth-btn-warning">...</button>

This is the favth-btn-danger button element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="favth-btn favth-btn-danger">...</button>

How to add icons to buttons

To use the Font Awesome icons with the button styles, insert the following code into your text editor:

Download

<a class="favth-btn" href="#"> 
  <i class="fas fa-download"></i>
  Download
</a>