Buttons Group Component

Groups a series of buttons that are contained in (e-buttons) creating new appearances and styles, recommended use for related buttons.


Add the container e-buttons next to the unified class to obtain impressive and elegant button groups.

It is recommended to use two or three buttons per container e-buttons so that they are not so extended, even so you can add as many as you wish, although they may break.

Use e-buttons unified

Basic example

<div class="e-buttons unified" role="group">
  <button class="e-btn">Button</button>
  <button class="e-btn">Button</button>
  <button class="e-btn">Button</button>
</div>
Button toolbar

Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

Use e-toolbar






<div class="e-toolbar">

  <div class="e-buttons unified" role="group">
    <button class="e-btn">1</button>
    <button class="e-btn">2</button>
  </div>
  <div class="e-buttons unified" role="group">
    <button class="e-btn">3</button>
    <button class="e-btn">4</button>
    <button class="e-btn">5</button>
  </div>
  <div class="e-buttons unified" role="group">
    <button class="e-btn">6</button>
  </div>
</div>
Sizes

You can add the sizes directly to the buttons with the sizes that you already know if you come from buttons component.



<!-- Small -->
<div class="e-buttons unified">
  <button class="e-btn small">Button</button>
  <button class="e-btn small">Button</button>
</div>
<!-- Normal -->
<div class="e-buttons unified">
  <button class="e-btn">Button</button>
  <button class="e-btn">Button</button>
</div>
<!-- Plus -->
<div class="e-buttons unified">
  <button class="e-btn plus">Button</button>
  <button class="e-btn plus">Button</button>
</div>
Group of buttons combined

Buttons grouped with other components.

Dropdown
Service 1 Service 2 Service 3
<div class="e-buttons unified">
  <button class="e-btn">Button</button>

  <div class="e-dropdown sky">
    Dropdown <!-- <i class="fas fa-angle-down"></i> -->
    <div class="drop-items">
      <a class="drop-item">Item</a>
    </div>
  </div>
</div>
Styles

All styles of buttons can be used to create beautiful groups..

Basic
Anime
Plane
Outlined
Outlined rounded
Inverted
Circle
<div class="e-toolbar">
  <div class="e-buttons unified">
    <button class="e-btn">Button</button>
    <button class="e-btn">Button</button>
  </div>
  <div class="e-buttons unified">
    <button class="e-btn anime">Button</button>
    <button class="e-btn anime">Button</button>
  </div>
  <div class="e-buttons unified">
    <button class="e-btn outlined">Button</button>
    <button class="e-btn outlined">Button</button>
  </div>
  <div class="e-buttons unified">
    <button class="e-btn rounded">Button</button>
    <button class="e-btn rounded">Button</button>
  </div>
  <div class="e-buttons unified">
    <button class="e-btn circle">
      <i class="fas fa-plus"></i>
    </button>
    <button class="e-btn circle">
      <i class="fas fa-users"></i>
    </button>
  </div>
</div>
Colors Gradient




<div class="e-toolbar">
  <div class="e-buttons unified">
    <button class="e-btn green-gradient">
      Button
    </button>
  </div>
  <div class="e-buttons unified">
    <button class="e-btn purple-gradient">
      Button
    </button>
  </div>
  <div class="e-buttons unified">
    <button class="e-btn blue-gradient">
      Button
    </button>
  </div>
</div>
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.

eFrolic | framework css 2018
eFrolic | framework css 2018

One-time donation


Donate
eFrolic | framework css 2018
eFrolic | framework css 2018

Serious sponsor


Become a Patron