--- layout: default permalink: /buttons category: components title: Buttons description: "The buttons are one of the most essential elements of our design, is the element with which most users interact, and for this reason we have diversities of options of the classic buttons, in different colors, sizes and states. They are easy to customize, you just need to see some examples and create your own ideas just by putting some classes." ---

{{page.title}} Component

{{page.description}}


Use

The .e-btn class can be used in the following tags:

<a class="e-btn"> anchor links.

<button class="e-btn"> Buttons by default.

<input type="submit" class="e-btn"> Inputs of type submit.

<input type="reset" class="e-btn"> Inputs of type reset.


Link
{% highlight html %} Link {% endhighlight %}

Sizes

Add class small or plus to give your buttons a smaller or larger size (Apply to all).

Examples:



{% highlight html %} Small Normal Plus{% endhighlight %}

Floating buttons

Add class float-left o float-right to float a button to the right or left. These buttons are fixed on the screen. (Apply to all).

Examples:

Live View {% highlight html %} {% endhighlight %}

Waves effect

All buttons by default already have the waves effect.

Examples: Click.

Fullwidth Buttons

Add class fullwidth to occupy 100% of width. (Does not apply in e-btn circle).

Examples:

{% highlight html %} fullwidth fullwidth{% endhighlight %}

Main Classes

These are the 7 kinds of buttons and each share the same properties.

.e-btn

.e-btn circle

.e-btn anime

.e-btn plane

.e-btn rounded

.e-btn inverted

.e-btn outlined


Oh oh! we observe your screen is small, we recommend using a larger monitor for the correct visualization of some elements.
This page looks small, because it has shrunk the browser or its smaller size device.

Basic buttons

11 buttons of predefined styles.

You can modify these buttons using the references above.

Available: resize, float, fullwidth and animate.


No-shadow

Link (The pointer over the button)

{% highlight html %} Default White Gray Dark Black Primary Success Warning Info Danger Purple Danger Link {% endhighlight %}

Anime Buttons

You can modify these buttons using the references above.

Available: resize, float, fullwidth and animate.

{% highlight html %} Primary Success Warning Danger Purple Info White Gray Dark Primary {% endhighlight %}

Outlined Buttons

You can modify these buttons using the references above.

Available: resize, float and animate.

Does not include gradient colors.

No-shadow

{% highlight html %} Primary Success Warning Info Danger Gray Dark Purple Info {% endhighlight %}

Outlined Rounded Buttons

You can modify these buttons using the references above.

Available: resize, float and animate.

Does not include gradient colors.

{% highlight html %} Primary Success Warning Info Danger Gray Dark Purple Info {% endhighlight %}

Outlined Plane Buttons

You can modify these buttons using the references above.

Available: resize, float and animate.

Does not include gradient colors.

No-shadow

{% highlight html %} Primary Success Warning Info Danger Gray Dark Purple Success {% endhighlight %}

Inverted Buttons

You can modify these buttons using the references above.

Available: resize, float and animate.

Does not include gradient colors.

Inverted Plane


Transparent Buttons


{% highlight html %} Default Primary Success Warning Info Danger Gray Dark Purple Button Butto Info Button {% endhighlight %}

Plane Buttons

You can modify these buttons using the references above.

Available: resize, float, fullwidth and animate.



No-shadow

Inverted

{% highlight html %} Primary Success Danger Warning Purple Button Button Button Success Success {% endhighlight %}

Disabled Buttons


{% highlight html %} Button {% endhighlight %}

Buttons group


{% highlight html %} {% endhighlight %}
See more about groups

Rounded Buttons

You can modify these buttons using the references above.

Available: resize, float, fullwidth and animate.

{% highlight html %} Primary White-> Success Warning Info Danger Gray Dark Purple Info {% endhighlight %}

Hamburgers / Menu icon

You can modify these buttons using the references above.

Available: resize, float, fullwidth and animate.

Required: Font awesome icons

No shadow
{% highlight html %} {% endhighlight %}

Circle Buttons

You can modify these buttons using the references above.

Available: resize, float and animate.

Does not include fullwidth.

No-shadow

Inverted

{% highlight html %} {% endhighlight %}

Gradient colors


{% highlight html %} Users {% endhighlight %}

Sizes