<div class="wrapper">
  <div class="title">
    <h1>Blue and White Buttons</h1>
    <h2>Penned by <a href="http://www.anastasiatumanova.com/" target="_blank">Anastasia Tumanova</a>.</h2>
  </div>
  <p>Demo</p>
  <a class="demo blue">Blue Button</a>
  <br>
  <a class="demo white">White Button</a>
    
  <p>Blue</p>
  <div class="bttn blue normal">&nbsp;&nbsp;Idle&nbsp;&nbsp;&nbsp;</div>
  <div class="bttn blue normal hover-blue">Hover</div>
  <div class="bttn blue normal active-blue">Active</div>
  <br>
  <p>White</p>
  <div class="bttn white normal">&nbsp;&nbsp;Idle&nbsp;&nbsp;&nbsp;</div>
  <div class="bttn white normal hover-white">Hover</div>
  <div class="bttn white normal active-white">Active</div>
  <br>
</div>

@aqua: #4092f1;
@aqua-dark: darken(@aqua, 8%);
@aqua-darker: darken(@aqua, 14%);
@aqua-darkest: darken(@aqua, 20%);
@aqua-light: lighten(@aqua, 15%);
@aqua-lighter: lighten(@aqua, 30%);
@aqua-lightest: lighten(@aqua, 60%);

@white: #FFFFFF;
@gray-almost-white: #f9f9f9;
@gray-lighter: #d2d2d2;
@gray-light: #aeaeae; 
@gray: #8e8e8e;
@gray-dark: #666666;
@gray-darker: #434343;
@black: #000000;

@electric-seafoam: #37DEB3;

.bttn {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  border-radius: 4px;
  margin-bottom: 20px;
  margin-right: 8px;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.03em;
  font-weight: 500;
  
  &.white {
    color: @gray-dark;
    background: @white;
    background: -webkit-linear-gradient(top, @white, lighten(@gray-lighter, 12%));
    border: 1px solid lighten(@gray-light, 10%);
    box-shadow: 0 1px 0px lighten(@gray-lighter, 9%);
  }

  &.blue {
    color: white;
    text-shadow: 0px 1px 0px @aqua-darker;
    background: -webkit-linear-gradient(top, @aqua, @aqua-dark);
    background-color: @aqua;
    border: 1px solid darken(@aqua-dark, 5%);
  }
  
  &.jumbo {
    line-height: 24px;
    font-size: 18px;
    padding: 14px 20px;
  }
  
  &.normal {
    line-height: 22px;
    font-size: 16px;
    padding: 9px 20px;
  }
    
  &.small {
    line-height: 14px;
    font-size: 14px;
    padding: 9px 10px;
  }

  &.tiny {
    line-height: 14px;
    font-size: 14px;
    padding: 7px 8px;
  }
  
  &.hover-blue {
      background: -webkit-linear-gradient(top, @aqua, @aqua-darker);
  }

  &.hover-white {
    background: -webkit-linear-gradient(top, @white, lighten(@gray-lighter, 8%));
  }

  &.active-blue {
    box-shadow: inset 0 1px 2px @aqua-darkest;
    background: -webkit-linear-gradient(top, @aqua-darker, @aqua-darker);
    border: 1px solid @aqua-darkest;
  }

  &.active-white {
      box-shadow: inset 0 1px 2px @gray-lighter;
      background: -webkit-linear-gradient(top, lighten(@gray-lighter, 12%), lighten(@gray-lighter, 12%));
      border: 1px solid @gray-light;
  }

}

// demos

a.demo {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  border-radius: 4px;
  margin-bottom: 20px;
  line-height: 22px;
  font-size: 16px;
  padding: 9px 20px;

  &.blue {
    color: white;
    border: 1px solid darken(@aqua-dark, 5%);
    background: @aqua;
    background: -webkit-linear-gradient(top, @aqua, @aqua-dark);
    letter-spacing: 0.07em;

    &:hover {
      background: -webkit-linear-gradient(top, @aqua, @aqua-darker);
    }
  
    &:active {
      box-shadow: inset 0 1px 2px @aqua-darkest;
      background: -webkit-linear-gradient(top, @aqua-darker, @aqua-darker);
      border: 1px solid @aqua-darkest;
    }
  }
  
  &.white {
    color: @gray-dark;
    background: @white;
    background: -webkit-linear-gradient(top, @white, lighten(@gray-lighter, 12%));
    border: 1px solid lighten(@gray-light, 10%);
    box-shadow: 0 1px 0px lighten(@gray-lighter, 9%);
    
    &:hover{
      background: -webkit-linear-gradient(top, @white, lighten(@gray-lighter, 8%));
    }
    
    &:active{
      box-shadow: inset 0 1px 2px @gray-lighter;
      background: -webkit-linear-gradient(top, lighten(@gray-lighter, 12%), lighten(@gray-lighter, 12%));
      border: 1px solid @gray-light;
    }
  }
}

// formatting

body {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

.wrapper {
  margin: 60px;
}

p {
  font-weight: 300;
  font-size: 14px;
  color: #aeaeae;
}

a {
  text-decoration: none;
  color: @electric-seafoam;
}

h1 {
  font-weight: 300;
  font-size: 32px;
  color: @gray-dark;
  line-height: 10px;
}

h2 {
  font-weight: 300;
  font-size: 15px;
  color: lighten(@gray-dark, 40%);
}

.title {
  margin-bottom: 30px;
}