<div class='main-wrapper'>
  <div class='buttons-wrapper'>
    <div class='button selected'><i class='fa fa-area-chart'></i></div>
    <div class='button'><i class='fa fa-line-chart'></i></div>
    <div class='button'><i class='fa fa-bar-chart'></i></div>
    <div class='button'><i class='fa fa-pie-chart'></i></div>
  </div>
</div>
<div class='text-wrapper'>
  <p>Pen made by Dan Andersson</p>
  <p>Based on Mikael Eidenberg's <a target='blank' href='https://dribbble.com/shots/693245-Untitled-iOS-iPhone-synth-app-waveforms/attachments/63195'>Dribbble</a> shot
</div>

@import url(https://fonts.googleapis.com/css?family=Roboto:400)

*
  margin: 0
  padding: 0
  box-sizing: border-box

body
  background-color: #212121
  text-rendering: auto
  -webkit-font-smoothing: antialiased
  font-family: Roboto
  
.text-wrapper
  position: absolute
  width: 100vw
  bottom: 20px
  text-align: center
  p
    font-size: 15px
    color: #555
    a
      text-decoration: none
      color: #03a9f4

.main-wrapper
  display: table
  margin: 350px auto 0
  .buttons-wrapper
    display: table-cell
    vertical-align: middle
    height: 59px
    width: 330px
    border-radius: 7px
    background-color: black
    border: 2px solid black
    box-shadow: 0 4px 8px rgba(0,0,0,0.55 )

    &:after
      content: ''
      display: block
      clear: both
    .button
      position: relative
      z-index: 1
      float: left
      padding: 15px 23px
      background-image: linear-gradient(#333, #222)
      text-align: center
      margin: 0 1px
      border-radius: 2px
      border-top: 1px solid rgba(255,255,255,0.25)
      border-left: 1px solid rgba(255,255,255,0.05)
      border-right: 1px solid rgba(255,255,255,0.05)
      box-shadow: inset 0 1px 0 rgba(0,0,0,0.1)
      cursor: pointer
      transition: all .175s ease
      &:first-child
        border-top-left-radius: 5px
        border-bottom-left-radius: 5px
        margin-left: 0
        &.selected
          &:before
            display: none
      &:last-child
        border-top-right-radius: 5px
        border-bottom-right-radius: 5px
        margin-right: 0
        &.selected
          &:after
            display: none
      &:hover
        z-index: 2
        background-image: linear-gradient(#373737, #262626)
        box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 4px 16px rgba(0,0,0,0.5)
      .fa
        color: #424242
        text-shadow: 0 -1px 0 rgba(0,0,0,0.75)
        font-size: 28px
        width: 32px
      
      &.selected
        z-index: 3
        cursor: default
        background-image: linear-gradient(#202020, #151515)
        border-top-color: rgba(0,0,0,0)
        border-left-color: rgba(0,0,0,0.55)
        border-right-color: rgba(0,0,0,0.55)
        box-shadow: inset 0 1px 6px rgba(0,0,0,0.5), 0 10px 20px rgba(255,255,255,0.06)
        &:after, &:before
          content: ''
          display: block
          position: absolute
          top: 0
          width: 1px
          height: 100%
          background-image: linear-gradient(rgba(0,0,0,0.25), rgba(2,165,238,0.4), rgba(0,0,0,0.25))
        &:before
          left: -4px
        &:after
          right: -4px
        .fa
          color: white
          text-shadow: 0 0 10px rgba(2,165,238,0.75)
          &:after
            content: ''
            display: block
            position: absolute
            bottom: -3px
            left: 0
            width: 80px
            height: 1px
            background-image: linear-gradient(to right, rgba(255,255,255,0.00), rgba(255,255,255,0.045), rgba(255,255,255,0.00))

$('.button').click(function(){
  $el = $(this);
  if ($el.hasClass('selected')) {
  } else {
    $el.siblings().removeClass('selected');
    $el.addClass('selected');
  }
});