A grid of buttons for the USF College of Nursing program to deliver Teddy Bears to children in hospitals.

index.html

<section class="tan two-line">
  <a href="#" class="simple">Order your<br /> B.E.A.R.S. Today</a>
  <a href="#" class="round">Order your<br /> B.E.A.R.S. Today</a>
  <a href="#" class="square">Order your<br /> B.E.A.R.S. Today</a>
</section>

<section class="gold two-line">
  <a href="#" class="simple">Order your<br /> B.E.A.R.S. Today</a>
  <a href="#" class="round">Order your<br /> B.E.A.R.S. Today</a>
  <a href="#" class="square">Order your<br /> B.E.A.R.S. Today</a>
</section>

<section class="tan">
  <a href="#" class="simple">Order your B.E.A.R.S. Today</a>
  <a href="#" class="round">Order your B.E.A.R.S. Today</a>
  <a href="#" class="square">Order your B.E.A.R.S. Today</a>
</section>

<section class="gold">
  <a href="#" class="simple">Order your B.E.A.R.S. Today</a>
  <a href="#" class="round">Order your B.E.A.R.S. Today</a>
  <a href="#" class="square">Order your B.E.A.R.S. Today</a>
</section>

style.less

body {
  font-family: sans-serif;
  margin: 40px;
  text-align: center;
}

.button-template(@bg) {
  a {
    background-color: @bg;
    border: 1px solid darken(@bg, 6%);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    color: #fff;
    display: inline-block;
    font-weight: bold;
    line-height: 20px;
    margin: 0 16px 48px;
    padding: 16px 20px;
    text-decoration: none;
    text-shadow: -1px -1px 0px rgba(0,0,0,0.2);
    transition: background 350ms;
    
    &:hover {
      background-color: lighten(@bg, 6%);
      transition: background 80ms;
    }
    &:active {
      box-shadow: inset 2px 2px 8px rgba(0,0,0,0.25);
      //padding: 17px 19px 15px 21px;
    }

    &.simple {
      background-image: linear-gradient(transparent, rgba(0,0,0,0.18));
      border-radius: 8px;
    }

    &.round {
      background-image: linear-gradient(
        rgba(255,255,255,0.14),
        rgba(0,0,0,0.05) 49%,
        rgba(0,0,0,0.14) 51%,
        rgba(0,0,0,0.22));
      border-radius: 56px;
      box-shadow: inset 1px 4px 6px rgba(255,255,255,0.3),
        inset 0 0 0 1px rgba(255,255,255,0.3),
        2px 2px 4px rgba(0,0,0,0.3);
      
      &:active {
        box-shadow: inset 2px 2px 8px rgba(0,0,0,0.25);
      }
    }
  
    &.square {
      background-color: desaturate(darken(@bg, 6%), 8%);
      border-color: darken(@bg, 12%);
      border-radius: 2px;
      box-shadow: inset 0 0 20px rgba(255,255,255,0.4),
        2px 4px 0 desaturate(darken(@bg, 8%), 12%),
        2px 4px 6px 2px rgba(0,0,0,0.3);
      
      &:hover {
        background-color: lighten(@bg, 3%);
      }
      &:active {
        box-shadow: inset 2px 2px 8px rgba(0,0,0,0.25);
        margin: 3px 14px 45px 18px;
      }
    }
  }
}

section {
  &.tan {
    .button-template(#cabb88);
  }
  &.gold {
    .button-template(#f2c11a);
  }
  &.two-line {
    a {
      background-image: url('http://health.usf.edu/cms_author/docs/Templates/nursing/images/bear.png');
      background-position: 20px center;
      background-repeat: no-repeat;
      margin-left: 35px;
      margin-right: 35px;
      padding-left: 65px;
      text-align: left;
      
      &:active {
        padding: 16px 20px 16px 65px;
      }
      
      &.simple {
        background-image: url('http://health.usf.edu/nocms/nursing/images/bear.png'),
          linear-gradient(transparent,
          rgba(0,0,0,0.18));
        background-position: 20px center, 0 0;
      }
      &.round {
        background-image:  url('http://health.usf.edu/nocms/nursing/images/bear.png'),
          linear-gradient(
          rgba(255,255,255,0.14),
          rgba(0,0,0,0.05) 49%,
          rgba(0,0,0,0.14) 51%,
          rgba(0,0,0,0.22));
         background-position: 20px center, 0 0;
      }
      &.square:active {
        margin: 3px 33px 45px 37px;
      }
    }
  }
}