Buttons


Structure:

The Minima buttons are composed of 2 different classes:
The first one is a simple button class. This defines the layout of a button but doesn't add any visual effects to it. In order to change it's appearence the second class is needed: the button effect class (bfx). These classes can add various special effects and colors to your buttons.

Usage:

Simply apply the desired css classes to a div, anchor or button.


150px left slide effect

150px slide
classes: m-btn m-bfx-p-slide
150px slide
classes: m-btn m-bfx-s-slide
150px slide
classes: m-btn m-bfx-t-slide
150px slide
classes: m-btn m-bfx-n-slide



300px left slide effect

300px slide
classes: m-btn m-bfx-p-slide2x
300px slide
classes: m-btn m-bfx-s-slide2x
300px slide
classes: m-btn m-bfx-t-slide2x
300px slide
classes: m-btn m-bfx-n-slide2x



Fade effect

fade
classes: m-btn m-bfx-p-fade
fade
classes: m-btn m-bfx-s-fade
fade
classes: m-btn m-bfx-t-fade
fade
classes: m-btn m-bfx-n-fade



Adding icons:

If you want to add icons to your buttons you can easily do so by adding your image directly inside it.
The buttons are designed to work with Google's variable icon font. This means that if you use google's icons you'll have a smoother workflow, otherwise adding custom icons may require adding additional custom css classes.

Note: If you place an icon in front of the text you shoul give it the "m-btn-icon" class. This will adjust it's margins to fit better.


Examples:


searchFind out now!
classes:m-btn m-bfx-p-slide2x + m-btn-icon
errorGive up
classes:m-btn m-bfx-t-fade + m-btn-icon