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
--- 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.description}}
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.
Add class small or plus to give your buttons a smaller or larger size (Apply to all).
Examples:
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 %}All buttons by default already have the waves effect.
Examples: Click.
Add class fullwidth to occupy 100% of width. (Does not apply in e-btn circle).
Examples:
{% highlight html %} fullwidth fullwidth{% endhighlight %}.e-btn
.e-btn circle
.e-btn anime
.e-btn plane
.e-btn rounded
.e-btn inverted
.e-btn outlined
11 buttons of predefined styles.
You can modify these buttons using the references above.
Available: resize, float, fullwidth and animate.
You can modify these buttons using the references above.
Available: resize, float, fullwidth and animate.
You can modify these buttons using the references above.
Available: resize, float and animate.
Does not include gradient colors.
You can modify these buttons using the references above.
Available: resize, float and animate.
Does not include gradient colors.
You can modify these buttons using the references above.
Available: resize, float and animate.
Does not include gradient colors.
You can modify these buttons using the references above.
Available: resize, float and animate.
Does not include gradient colors.
You can modify these buttons using the references above.
Available: resize, float, fullwidth and animate.
You can modify these buttons using the references above.
Available: resize, float, fullwidth and animate.
You can modify these buttons using the references above.
Available: resize, float, fullwidth and animate.
Required: Font awesome icons
You can modify these buttons using the references above.
Available: resize, float and animate.
Does not include fullwidth.