Hexagonal Buttons

Hexagonal Buttons.markdown

Hexagonal Buttons

Pure CSS3 hexagonal buttons.

PSD: http://dribbble.com/shots/1302221-Freebie-Upload-Buttons

A Pen by Yusuf on CodePen.

License.

index.haml

.buttons
  - (1..2).each do |i|
    %span.red
  %br
  %span.blue
  %span.red
  %span.green
  %br
  - (1..2).each do |i|
    %span.blue
  - (1..2).each do |i|
    %span.green

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

$red:   #e1443f;
$blue:  #4490c1;
$green: #1db79b;

body {
  background: #2e2b33;
}
.buttons {
  display: block;
  margin: 50px auto;
  width: 320px;
  text-align: center;
}

span.green + br + span.blue {margin-left: -4px}
span {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  width: 59px; height: 35px;
  margin: 6px 1px;
  border-radius: 9.5px;
  border-left: 6px solid #28282a;
  border-right: 6px solid #28282a;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    inset 0 0 0 0 rgba(0,0,0,.7);
  cursor: pointer;
  
  transition: all .25s ease-in-out;
  -webkit-transition: all .25s ease-in-out;
}
  span:hover {
    box-shadow:
      0 0 0 1px rgba(255,255,255,.03),
      inset 0 0 7px -1px rgba(0,0,0,.7);
  }
span:before,
span:after {
  box-sizing: border-box;
  position: absolute;
  display: block;
  content: '';
  width: 35px; height: 35px;
  transform: rotate(45deg) skew(-13deg,-13deg);
  border-radius: 9.5px;
  transition: all .25s ease-in-out;
  -webkit-transition: all .25s ease-in-out;
}
span:before {
  top: -14px;
  left: 6px;
  border-top: 6px solid #28282a;
  border-left: 6px solid #28282a;
  box-shadow:
    -1px -1px 0 0 rgba(255,255,255,.03),
    inset 0 0 0 -4px rgba(0,0,0,.7);
}
  span:hover:before {
    box-shadow:
      -1px -1px 0 0 rgba(255,255,255,.03),
      inset 4px 4px 7px -4px rgba(0,0,0,.7);
  }
span:after {
  bottom: -14px;
  left: 6px;
  border-bottom: 6px solid #28282a;
  border-right: 6px solid #28282a;
  box-shadow:
    1px 1px 0 0 rgba(255,255,255,.03),
    inset 0 0 0 -4px rgba(0,0,0,.7);
}
  span:hover:after {
    box-shadow:
      -1px -1px 0 0 rgba(255,255,255,.03),
      inset -4px -4px 7px -4px rgba(0,0,0,.7);
  }


span.red {
  background: $red;
}
span.blue {
  background: $blue;
}
span.green {
  background: $green;
}

span.red:before,
span.red:after {
  background: $red;
}
span.blue:before,
span.blue:after {
  background: $blue;
}
span.green:before,
span.green:after {
  background: $green;
}