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.

<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>