Group Buttons

Group buttons are great when you want to relate actions between items. A good exampe could be a text editor action items. They work similarly to buttons and look nice on small devices.

Buildng the markup

It is really somple to build the group buttons markup, as we try to make it really neat.

• Button
• Button
• Button

   
  <ul class="button-group">
    <li><a href="#" class="button">Button</a></li>
    <li><a href="#" class="button">Button</a></li>
    <li><a href="#" class="button">Button</a></li>
  </ul>
   

Group buttons variations

There are two variations for button groups, .pill and .radius, but it is also possible to add some of the built in variations to the .button class elements.

   
  <ul class="button-group pill">
   <li><a href="#" class="button">Button</a></li>
   <li><a href="#" class="button danger">Button</a></li>
   <li><a href="#" class="button">Button</a></li>
  </ul>
  <ul class="button-group radius">
   <li><a href="#" class="butto success">Button</a></li>
   <li><a href="#" class="button">Button</a></li>
   <li><a href="#" class="button primary">Button</a></li>
  </ul>
   

Available sass variables

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  
//Media device widths
$sm-device-width: 480px !default;

//Media queries
$button-group-small-media-query: "#{$media-display} and (max-width: #{$sm-device-width})" !default;

//Variations
$button-radius: px-to-rems(3) !default;
$button-pill-radius: px-to-rems(1000) !default;
  

Responsiveness

The buttons within group buttons will stack on small devices (480px and down), this way it is still navigational for example on you brand new iPhone.

  
@media #{$button-group-small-media-query} {
  .button-group {
    li {
      float: none;
      display: block;

      .button,
      button {
        display: block;
      }
    }
  }
}