Foodies template

Menu
  • Home
  • Store
  • Features
    • Module Positions
    • Module Variations
    • Navigation Styles
      • Main Navigation
      • Vertical Menus
      • Horizontal Menus
    • Typography
      • Image Styles
      • Button Styles
      • Bootstrap Styles
      • List Styles
      • Icon Styles
    • Error 404 Page
    • Offline Page
  • Joomla
    • Joomla Content
      • Category Blog
      • List All Categories
      • Single Article
      • Archived Article
      • Tagged Items
      • List of Tagged Items
      • List of All Tags
      • Search
      • Smart Search
      • Single News Feed
      • Iframe Wrapper
    • Joomla Modules
  • Extensions
  • Docs

Foodies template

  • Home
  • Store
  • Features
    • Module Positions
    • Module Variations
    • Navigation Styles
      • Main Navigation
      • Vertical Menus
      • Horizontal Menus
    • Typography
      • Image Styles
      • Button Styles
      • Bootstrap Styles
      • List Styles
      • Icon Styles
    • Error 404 Page
    • Offline Page
  • Joomla
    • Joomla Content
      • Category Blog
      • List All Categories
      • Single Article
      • Archived Article
      • Tagged Items
      • List of Tagged Items
      • List of All Tags
      • Search
      • Smart Search
      • Single News Feed
      • Iframe Wrapper
    • Joomla Modules
  • Extensions
  • Docs

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>

To use one or more button styles, insert the code from the examples into your text editor. Make sure the code is added in the HTML mode by pressing the Toggle editor button.

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 & 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="fa fa-download"></i>
Download
</a>
To use the icons with the button styles, insert the code from the examples into your text editor. Make sure the code is added in the HTML mode by pressing the Toggle editor button. SInce the default Joomla! editor strips the <i> tags, use the EDITOR NONE setting inside the Global Configuration to save the icon elements.

© 2023 FavThemes