Nice CSS3 button styles

index.slim

html
  body
    span class="btn-blue"
    span class="btn-red"
    span class="btn-green"
    span class="btn-yellow"

Nice-CSS3-button-styles.markdown

Nice CSS3 button styles

A Pen by dodozhang21 on CodePen.

License.

style.scss

@import "compass/css3";
$blue: #108FE8;
$yellow: #FFC334;
$red: #E53030;
$green: #0EC518;

@mixin round-button($baseColor:$blue, $hoverBaseColor:#333, $diameter:5vw) {
  background: $baseColor;
  border: 3px solid #fff;
  border-radius: 100%;
  box-shadow: 0 -2px 0 3px darken($baseColor, 10%) inset, 0 5px 5px rgba(darken($baseColor, 40%), 0.17), 0 15px rgba(#fff, 0.25) inset;
  cursor: pointer;
  display: inline-block;
  height: $diameter;
  width: $diameter;
  
  &:hover {
    background: $hoverBaseColor;
    box-shadow: 0 -2px 0 3px darken($hoverBaseColor, 10%) inset, 0 5px 5px rgba(darken($hoverBaseColor, 40%), 0.17), 0 15px rgba(#fff, 0.32) inset;
   }
}

body {
  background: none repeat scroll 0 0 #71AFDF;
  text-align: center;
  margin-top: 50px;
}

span {
  margin: 0 10px;
}

.btn-blue {
  @include round-button;
}
.btn-red {
  @include round-button($red);
}
.btn-green {
  @include round-button($green);
}
.btn-yellow {
  @include round-button($yellow);
}