A Pen by Geoff Yuen.

Button-Group.markdown

Button Group

A Pen by Geoff Yuen on CodePen.

License.

index.html

<h1>Button Group</h1>

<span class="btngroup">
  <button class="btngroup--btn">I like</button>
  <button class="btngroup--btn">big</button>
  <button class="btngroup--btn">buttons</button>
  <button class="btngroup--btn">and I</button>
  <button class="btngroup--btn">cannot</button>
  <button class="btngroup--btn">lie</button>
</span>

<p>
  Do you like big buttons? 

  <span class="btngroup">
    <button class="btngroup--btn">Yes</button>
    <button class="btngroup--btn">No</button>
  </span>

</p>

<p>
  &lt;button&gt;s and &lt;a&gt;s mixed:
</p>

<span class="btngroup">
  <button class="btngroup--btn">I like</button>
  <a href="#" class="btngroup--btn">big</a>
  <button class="btngroup--btn">buttons</button>
  <a href="#" class="btngroup--btn">and I</a>
  <button class="btngroup--btn">cannot</button>
  <a href="#" class="btngroup--btn">lie</a>
</span>

style.scss

@import url(http://fonts.googleapis.com/css?family=Raleway:700);

*,*:before,*:after {
  box-sizing: border-box;
}

body {
  background: #2c3e50;
  padding: 30px 0;
  font-family: raleway, sans-serif;
  color: #bdc3c7;
  text-align: center;
}

.btngroup {
  font-size: 0;
  line-height: 1;
  white-space: nowrap;
  display: inline; // ?
  
  &--btn { // sass bem is cool
    font-size: 1rem;
    letter-spacing: .1em;
    text-decoration: none;
    text-transform: uppercase;
    background: transparent;
    border: 2px solid #7f8c8d;
    //margin: 0 -1px -1px;
    border-left-width: 0;
    display: inline-block;
    padding: .5em 1.25em;
    outline: 0; // no glow crap
    
    &:first-child {
      border-left-width: 2px;
      border-radius: 2em 0 0 2em;
    }
    
    &:last-child {
      border-radius: 0 2em 2em 0;
    }
    
    &:link {
      color: #bdc3c7;
    }
    
    &:visted {
      color: #bdc3c7;
    }
    
    &:hover {
      background: #34495e;
      color: #fff;
    }
    
    &:active {
      background: #fff;
      color: #34495e;
    }
  }
}