A CodePen by Curt. Yet another pill-button - You're probably sick of pill buttons, but I decided to make a new one anyway. I like the shallow depth and clean look. These mixins allows the user to create any color pill button they want with variable margin

index.html

<div class="awesomePill">I'm another pill button</div>
<div class="awesomePillLight">And I'm his lighter cousin</div>

style.scss

@import "compass";
*{
  font-family: "Helvetica Neue", Helvetica, Aria, "Lucida Grande", sans-serif;
  font-size: 14px;
}

@mixin pill-button($color, $margin:10px 5px, $padding:5px 25px, $width:auto, $height:auto) {
    $colorShade2: shade($color, 2%);
    $colorShade10: shade($color, 10%);
    $colorShade25: shade($color, 25%);
    $colorShade55: shade($color, 55%);
    $colorShade65: shade($color, 65%);
    margin: $margin;
    padding: $padding;
    width: $width;
    height: $height;
    font-size: 12px;
    line-height: 100%;
    font-weight: bold;
    font-smooth: always;
    color: #fff!important;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 0 -1px 0 shade($color, 40%);
    cursor: pointer;
    border: none;
    outline: none;
    @include background(linear-gradient(top, $color, $colorShade25));
    border-radius: 27px;
    @include box-shadow(0 1px 1px rgba(255,255,255,.6) inset, 0 0 0 1px shade($color, 10%), 0 2px 3px -1px tint($color, 80%));
    @include inline-block;
    cursor: pointer;
    &:hover, &:focus {
        @include background(linear-gradient(top, $colorShade2 0%, $colorShade55 100%));
        text-shadow: 0 -1px 0 shade($color, 60%);
    }
    &:focus {
        @include box-shadow(0 0 0 1px $colorShade65, 0 0 3px 1px $colorShade65);
    }
    &:active {
        @include background(linear-gradient(top, $colorShade25 0%, $colorShade55 100%));
        text-shadow: 0 -1px 0 shade($color, 90%);
    }
    &.disabled {
        pointer-events: none;
    }
}

@mixin light-pill-button($color, $margin:10px 5px, $padding:5px 25px, $width:auto, $height:auto) {
    margin: $margin;
    padding: $padding;
    width: $width;
    height: $height;
    font-size: 12px;
    line-height: 100%;
    font-weight: bold;
    font-smooth: always;
    color: $color !important;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 0 1px 0 #fff;
    cursor: pointer;
    border: none;
    outline: none;
    @include background(linear-gradient(top, tint($color, 90%) 20%, tint($color, 50%) 100%));
    border-radius: 27px;
    @include box-shadow(0 1px 1px rgba(255,255,255,.6) inset, 0 0 0 1px tint($color, 30%), 0 2px 3px -1px tint($color, 80%));
    @include inline-block;
    behavior: url(../PIE.htc);
    cursor: pointer;
    &:hover, &:focus {
        @include background(linear-gradient(top, tint($color, 80%) 20%, tint($color, 40%) 100%));
        color: shade($color, 20%);
    }
    &:focus {
        @include box-shadow(0 0 0 1px $color, 0 0 3px 1px $color);
    }
    &:active {
        @include background(linear-gradient(top, tint($color, 70%) 20%, tint($color, 30%) 100%));
        color: shade($color, 40%);
    }
    &.disabled {
        pointer-events: none;
    }
}

.awesomePill {
  @include pill-button(#0099FF);
}
.awesomePillLight {
  @include light-pill-button(#006699);
}