Button Shapes

index.html

<div id="content">
  <aside class="diamond"> Diamond </aside>
  <aside class="ribbon"> Ribbon </aside>
  <aside class="arrow"> Arrow </aside>
  <aside class="rounded"> Rounded </aside>
  <aside class="sheer"> Sheer </aside>
</div>

style.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
  margin: 0;
  font-family: Open Sans, sans-serif;
  font-size: 20px;
  text-align: center;
  background-image: linear-gradient(left, #f4dce6, #e8b5db 50%, #f4dce6); }

#content {
  width: 160px;
  margin: 25px auto; }

aside {
  margin: 20px 0;
  line-height: 34px;
  position: relative;
  cursor: pointer;
  user-select: none; }
  aside:hover {
    top: -1px; }
  aside:active {
    top: 1px; }
  aside.diamond {
    background-color: #c6ed8d; }
    aside.diamond:after, aside.diamond:before {
      border-color: transparent #c6ed8d; }
    aside.diamond:before {
      left: -17px;
      border-width: 17px 17px 17px 0; }
    aside.diamond:after {
      right: -17px;
      border-width: 17px 0 17px 17px; }
  aside.ribbon {
    background-color: #7de3c8; }
    aside.ribbon:before, aside.ribbon:after {
      top: 5px;
      z-index: -10; }
    aside.ribbon:before {
      border-color: #53dab6 #53dab6 #53dab6 transparent;
      left: -25px;
      border-width: 17px; }
    aside.ribbon:after {
      border-color: #53dab6 transparent #53dab6 #53dab6;
      right: -25px;
      border-width: 17px; }
  aside.arrow {
    background-color: #8d96ed; }
    aside.arrow:after, aside.arrow:before {
      border-width: 17px 0 17px 17px; }
    aside.arrow:before {
      border-color: #8d96ed transparent;
      left: -17px; }
    aside.arrow:after {
      border-color: transparent #8d96ed;
      right: -17px; }
  aside.rounded {
    background-color: #fc9e86;
    border-radius: 25px/17px;
    left: -20px;
    width: 200px; }
  aside.sheer {
    background-color: #85c9ed;
    left: -5px;
    width: 170px; }
    aside.sheer:after, aside.sheer:before {
      border-width: 33px 10px 0 0; }
    aside.sheer:before {
      left: -10px;
      border-color: transparent #85c9ed; }
    aside.sheer:after {
      right: -10px;
      border-color: #85c9ed transparent; }

aside:before, aside:after {
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 0; }