A Pen by hidoos.

CSS-Flat-Button-Shapes.markdown

CSS Flat Button Shapes

A Pen by hidoos on CodePen.

License.

index.haml

#content
  %aside.diamond Diamond
  %aside.ribbon Ribbon
  %aside.arrow Arrow
  %aside.rounded Rounded
  %aside.sheer Sheer

style.scss

@import "compass";
$bg: #E8B5DB;
$color-diamond: #C6ED8D;
$color-ribbon: #7DE3C8;
$color-arrow: #8D96ED;
$color-rounded: #FC9E86;
$color-sheer: #85C9ED;

@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;
  @include background(linear-gradient(left, adjust-hue(lighten($bg,5),10), $bg 50%, adjust-hue(lighten($bg,5),10)));
}
html {min-height: 100%;}

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

aside {
  margin: 20px 0;
  line-height: 34px;
  position: relative;
  cursor: pointer;
  user-select: none;
  &:hover {
    top: -1px;
  }
  &:active {
    top: 1px;
  }
  &.diamond {
    background-color: $color-diamond;
    &:after, &:before {
      border-color: transparent $color-diamond;
    }
    &:before {
      left: -17px;
      border-width: 17px 17px 17px 0;
    }
    &:after {
      right: -17px;
      border-width: 17px 0 17px 17px;
    }
  }
  &.ribbon {
    background-color: $color-ribbon;
    $color-ribbon: darken($color-ribbon, 10);
    &:before, &:after {
      top: 5px;
      z-index: -10;
    }
    &:before {
      border-color: $color-ribbon $color-ribbon $color-ribbon transparent;
      left: -25px;
      border-width: 17px;
    }
    &:after {
      border-color: $color-ribbon transparent $color-ribbon $color-ribbon;
      right: -25px;
      border-width: 17px;
    }
  }
  &.arrow {
    background-color: $color-arrow;
    &:after, &:before {
      border-width: 17px 0 17px 17px;
    }
    &:before {
      border-color: $color-arrow transparent;
      left: -17px;
    }
    &:after {
      border-color: transparent $color-arrow;
      right: -17px;
    }
  }
  &.rounded {
    background-color: $color-rounded;
    border-radius: 25px / 17px;
    left: -20px;
    width: 200px;
  }
  &.sheer {
    background-color: $color-sheer;
    left: -5px;
    width: 170px;
    &:after, &:before {
      border-width: 33px 10px 0 0;
    }
    &:before {
      left: -10px;
      border-color: transparent $color-sheer;
    }
    &:after {
      right: -10px;
      border-color: $color-sheer transparent;
    }
  }
}

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