<a href="#0" class="button-blue">
  <span class="style"></span>
  <h3>Teach me to file my taxes</h3>
  <span>Teach Me</span> <time>⓵ exp: Mar 12, 2013</time>
  <div class="price">
    <span>$30</span>
  </div>
  <div class="arrow">
    <span>></span>
  </div>
</a>

<a href="#0" class="button-pink">
  <span class="style"></span>
  <h3>Teach me to file my taxes</h3>
  <span>Teach Me</span> <time>⓵ exp: Mar 12, 2013</time>
  <div class="price">
    <span>$30</span>
  </div>
  <div class="arrow">
    <span>></span>
  </div>
</a>

<a href="#0" class="button-green">
  <span class="style"></span>
  <h3>Teach me to file my taxes</h3>
  <span>Teach Me</span> <time>⓵ exp: Mar 12, 2013</time>
  <div class="price">
    <span>$30</span>
  </div>
  <div class="arrow">
    <span>></span>
  </div>
</a>
@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);

html {
  background: #666;
}
body {
  width: 420px;
  margin: 0 auto;
  background: #eee;
  padding: 20px;
  font-family: sans-serif;
  font-size: 12px;
}

a {
  text-decoration: none;
}

%button {
  display: block;
  background: white;
  padding: 20px;
  position: relative;
  color: #999;
  box-shadow: 0 2px 1px -1px rgba(black, 0.2);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0 0.75rem 0;
  .style {
    width: 10px; 
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    &:after {
      content: "";
      position: absolute;
      z-index: 1;
      top: 100%;
      left: 0;
      width: 100%;
      margin-top: -5px;
      height: 5px;
      background: #4e8ad1;
    }
  }
  h3 {
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
    color: black;
    font-size: 1.2rem;
    margin: 0 0 0.5rem 0;
  }
  .arrow {
    background: #f5f5f5;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40px;
    text-align: center;
    color: #e3e3e8;
    text-shadow: -1px 0 1px rgba(white, 1);
    span {
      font-size: 2rem;
      vertical-align: middle;
      // Fancy vertical centering.
      &:before {
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
      }
    }
    &:after {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      margin-top: -5px;
      height: 5px;
      background: #d7d4d4;
      z-index: 1;
    }
  }
  .price {
    position: absolute;
    right: 45px;
    top: 0;
    height: 100%;
    font-size: 2.2rem;
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
    &:before {
      content: "";
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
  }
  &:after {
    content: "";
    position: absolute;
    background: #e6e6e6;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: -5px;
    height: 5px;
  }
}

.button-blue {
  @extend %button;
  .style {
    background: #7daee9;
  }
}

.button-pink {
  @extend %button;
  .style {
    background: #de7cb9;
    &:after {
      background: #d052a0;
    }
  }
}

.button-green {
  @extend %button;
  .style {
    background: #7fd373;
    &:after {
      background: #4ba73c;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.