Buttons Component

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.

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

<a class="e-btn" href="#" role="button">Link</a>
<button class="e-btn">Button</button>
<input class="e-btn" type="submit" value="Submit">
<input class="e-btn" type="reset" value="Reset">

Sizes

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

Examples:

<a class="e-btn small">Small</a>
<a class="e-btn">Normal</a>
<a class="e-btn plus">Plus</a>

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

<a class="e-btn circle float-left"><i class="fas fa-plus"></i></a>
<a class="e-btn circle float-right"><i class="fas fa-plus"></i></a>

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:

<a class="e-btn fullwidth">fullwidth</a>
<a class="e-btn fullwidth">fullwidth</a>

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)

<a class="e-btn">Default</a>
<a class="e-btn white">White</a>
<a class="e-btn gray">Gray</a>
<a class="e-btn dark">Dark</a>
<a class="e-btn black">Black</a>
<a class="e-btn primary">Primary</a>
<a class="e-btn success">Success</a>
<a class="e-btn warning">Warning</a>
<a class="e-btn sky">Info</a>
<a class="e-btn danger">Danger</a>
<a class="e-btn purple">Purple</a>

<!-- No-shadow -->
<a class="e-btn danger no-shadow">Danger</a>
<!-- Link -->
<a class="e-btn sky link">Link</a>

Anime Buttons

You can modify these buttons using the references above.

Available: resize, float, fullwidth and animate.

Primary Success Warning Danger

Purple Info White Gray Dark

Inverted

Primary Success Purple Danger Info Warning Gray Dark

<a class="e-btn anime primary">Primary</a>
<a class="e-btn anime success">Success</a>
<a class="e-btn anime warning">Warning</a>
<a class="e-btn anime danger">Danger</a>
<a class="e-btn anime purple">Purple</a>
<a class="e-btn anime sky">Info</a>
<a class="e-btn anime white">White</a>
<a class="e-btn anime gray">Gray</a>
<a class="e-btn anime dark">Dark</a>

<!-- Inverted -->
<a class="e-btn anime inverted primary">Primary</a>

Outlined Buttons

You can modify these buttons using the references above.

Available: resize, float and animate.

Does not include gradient colors.

No-shadow

<a class="e-btn outlined primary">Primary</a>
<a class="e-btn outlined success">Success</a>
<a class="e-btn outlined warning">Warning</a>
<a class="e-btn outlined sky">Info</a>
<a class="e-btn outlined danger">Danger</a>
<a class="e-btn outlined gray">Gray</a>
<a class="e-btn outlined dark">Dark</a>
<a class="e-btn outlined purple">Purple</a>

<!-- No-shadow -->
<a class="e-btn outlined no-shadow sky">Info</a>

Outlined Rounded Buttons

You can modify these buttons using the references above.

Available: resize, float and animate.

Does not include gradient colors.

Primary Success Warning Info Danger Gray Dark Purple

No-shadow

Primary Success Danger Purple Warning Info

<a class="e-btn outlined rounded primary">Primary</a>
<a class="e-btn outlined rounded success">Success</a>
<a class="e-btn outlined rounded warning">Warning</a>
<a class="e-btn outlined rounded sky">Info</a>
<a class="e-btn outlined rounded danger">Danger</a>
<a class="e-btn outlined rounded gray">Gray</a>
<a class="e-btn outlined rounded dark">Dark</a>
<a class="e-btn outlined rounded purple">Purple</a>

<!-- No-shadow -->
<a class="e-btn outlined rounded no-shadow sky">
Info
</a>

Outlined Plane Buttons

You can modify these buttons using the references above.

Available: resize, float and animate.

Does not include gradient colors.

No-shadow

<a class="e-btn outlined plane primary">Primary</a>
<a class="e-btn outlined plane success">Success</a>
<a class="e-btn outlined plane warning">Warning</a>
<a class="e-btn outlined plane sky">Info</a>
<a class="e-btn outlined plane danger">Danger</a>
<a class="e-btn outlined plane gray">Gray</a>
<a class="e-btn outlined plane dark">Dark</a>
<a class="e-btn outlined plane purple">Purple</a>

<!-- No-shadow -->
<a class="e-btn outlined plane no-shadow success">Success</a>

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

<a class="e-btn inverted">Default</a>
<a class="e-btn inverted primary">Primary</a>
<a class="e-btn inverted success">Success</a>
<a class="e-btn inverted warning">Warning</a>
<a class="e-btn inverted sky">Info</a>
<a class="e-btn inverted danger">Danger</a>
<a class="e-btn inverted gray">Gray</a>
<a class="e-btn inverted dark">Dark</a>
<a class="e-btn inverted purple">Purple</a>

<!-- Inverted Plane -->
<a class="e-btn inverted plane sky">Button</a>
<a class="e-btn inverted plane danger">Butto</a>

<!-- Transparent Buttons -->
<a class="e-btn outlined transparent no-shadow">Info</a>
<a class="e-btn outlined plane transparent no-shadow">
Button
</a>

Plane Buttons

You can modify these buttons using the references above.

Available: resize, float, fullwidth and animate.

No-shadow

Inverted

<a class="e-btn plane primary">Primary</a>
<a class="e-btn plane success">Success</a>
<a class="e-btn plane danger">Danger</a>
<a class="e-btn plane warning">Warning</a>

<a class="e-btn plane purple">Purple</a>
<a class="e-btn plane blue-gradient">Button</a>
<a class="e-btn plane green-gradient">Button</a>
<a class="e-btn plane purple-gradient">Button</a>

<!-- No-shadow -->
<a class="e-btn plane no-shadow success">Success</a>

<!-- Inverted -->
<a class="e-btn plane inverted success">Success</a>

Disabled Buttons

Disabled Disabled

<a class="e-btn" disabled>Button</a>

Buttons group

<div class="e-buttons unified">
  <a class="e-btn success">Button</a>
  <a class="e-btn primary">Button</a>
  <a class="e-btn danger">Button</a>
</div>

See more about groups

Rounded Buttons

You can modify these buttons using the references above.

Available: resize, float, fullwidth and animate.

Primary White Success Warning Info Danger Gray Dark Purple

No-shadow

Info Danger Success Warning Purple Primary

<a class="e-btn rounded primary">Primary</a>
<a class="e-btn rounded white">White</a>->
<a class="e-btn rounded success">Success</a>
<a class="e-btn rounded warning">Warning</a>
<a class="e-btn rounded sky">Info</a>
<a class="e-btn rounded danger">Danger</a>
<a class="e-btn rounded gray">Gray</a>
<a class="e-btn rounded dark">Dark</a>
<a class="e-btn rounded purple">Purple</a>

<!-- No-shadow -->
<a class="e-btn rounded no-shadow sky">Info</a>

Hamburgers / Menu icon

You can modify these buttons using the references above.

Available: resize, float, fullwidth and animate.

Required: Font awesome icons

No shadow

<!-- Basic -->
<a class="e-btn"><i class="fas fa-bars"></i></a>
<a class="e-btn danger"><i class="fas fa-bars"></i></a>
<a class="e-btn purple"><i class="fas fa-bars"></i></a>

<!-- Inverted -->
<a class="e-btn inverted danger"><i class="fas fa-bars"></i></a>
<a class="e-btn inverted primary"><i class="fas fa-bars"></i></a>
<a class="e-btn inverted purple"><i class="fas fa-bars"></i></a>
<!-- Circle -->
<a class="e-btn circle"><i class="fas fa-bars"></i></a>
<a class="e-btn circle primary"><i class="fas fa-bars"></i></a>
<a class="e-btn circle danger"><i class="fas fa-bars"></i></a>
<!--outlined -->
<a class="e-btn outlined"><i class="fas fa-bars"></i></a>
<a class="e-btn outlined sky"><i class="fas fa-bars"></i></a>
<a class="e-btn outlined danger"><i class="fas fa-bars"></i></a>
<!-- Anime -->
<a class="e-btn anime"><i class="fas fa-bars"></i></a>
<a class="e-btn anime purple"><i class="fas fa-bars"></i></a>
<a class="e-btn anime success"><i class="fas fa-bars"></i></a>
<!-- plane inverted -->
<a class="e-btn plane inverted"><i class="fas fa-bars"></i></a>
<a class="e-btn plane inverted sky"><i class="fas fa-bars"></i></a>
<a class="e-btn plane inverted purple"><i class="fas fa-bars"></i></a>

<!-- No shadow -->
<a class="e-btn no-shadow"><i class="fas fa-bars"></i></a>
<a class="e-btn primary no-shadow"><i class="fas fa-bars"></i></a>
<a class="e-btn success no-shadow"><i class="fas fa-bars"></i></a>

Circle Buttons

You can modify these buttons using the references above.

Available: resize, float and animate.

Does not include fullwidth.

No-shadow

Inverted

<a class="e-btn circle white"><i class="fas fa-plus"></i></a>

<a class="e-btn circle gray"><i class="fa fa-users"></i></a>

<a class="e-btn circle dark"><i class="fa fa-users"></i></a>

<a class="e-btn circle black"><i class="fas fa-plus"></i></a>

<a class="e-btn circle"><i class="fa fa-users"></i></a>

<a class="e-btn circle success"><i class="fas fa-user-plus"></i></a>

<a class="e-btn circle danger"><i class="fas fa-user-plus"></i></a>

<a class="e-btn circle warning"><i class="fa fa-users"></i></a>

<a class="e-btn circle sky"><i class="fa fa-users"></i></a>

<a class="e-btn circle purple"><i class="fas fa-plus"></i></a>

<a class="e-btn circle green-gradient"><i class="fa fa-users"></i></a>

<a class="e-btn circle purple-gradient"><i class="fas fa-user-plus"></i></a>

<a class="e-btn circle blue-gradient"><i class="fa fa-users"></i></a>

<!-- No-shadow -->
<a class="e-btn circle no-shadow success"><i class="fas fa-user-plus"></i></a>

<!-- Inverted -->
<a class="e-btn circle inverted primary"><i class="fas fa-user-plus"></i></a>

Gradient colors

Users Add users

<a class="e-btn purple-gradient"><i class="fa fa-users"></i> Users</a>
<a class="e-btn green-gradient"><i class="fas fa-plus"></i></a>
<a class="e-btn blue-gradient"><i class="fa fa-users"></i></a>

Sizes

P P P
Primary Primary Primary
Primary Primary Primary
Primary Primary Primary
Primary Primary Primary
Primary Primary Primary
Primary Primary Primary

<a class="e-btn circle small primary">P</a>
<a class="e-btn circle primary">P</a>
<a class="e-btn circle plus primary">P</a>
<a class="e-btn small primary">Primary</a>
<a class="e-btn primary">Primary</a>
<a class="e-btn plus primary">Primary</a><br>
<a class="e-btn inverted small primary">Primary</a>
<a class="e-btn inverted primary">Primary</a>
<a class="e-btn inverted plus primary">Primary</a>
<a class="e-btn anime small primary">Primary</a>
<a class="e-btn anime primary">Primary</a>
<a class="e-btn anime plus primary">Primary</a><br>
<a class="e-btn outlined small primary">Primary</a>
<a class="e-btn outlined primary">Primary</a>
<a class="e-btn outlined plus primary">Primary</a>
<a class="e-btn rounded small primary">Primary</a>
<a class="e-btn rounded primary">Primary</a>
<a class="e-btn rounded plus primary">Primary</a>
<a class="e-btn plane small primary">Primary</a>
<a class="e-btn plane primary">Primary</a>
<a class="e-btn plane plus primary">Primary</a>

Contribute on GitHub

Become a sponsor.

If you are using our framework in a product that generates income, you can also help its maintenance if you wish, if you frequently help in your company or personal developments consider making a recurring donation.

If you want to see your company's logo on this site it's time to be a serious Sponsor.

One-time donation

Donate

Serious sponsor

Become a Patron