box button

box-button.markdown

box button

A Pen by kikeur on CodePen.

License.

index.html

<div class="ctn-btn">
     <div class="center">
       <div class="btn light">light</div>
    </div>
</div>
<div class="ctn-btn">
    <div class="center">
       <div class="btn dark">dark</div>
    </div>
</div>
<div class="ctn-btn">
  <div class="center">
     <div class="btn pink">pink</div>
  </div>
</div>
<div class="ctn-btn">
  <div class="center">
    <div class="btn red">red</div>
  </div>
</div>
<div class="ctn-btn">
  <div class="center">
    <div class="btn green">green</div>
  </div>
</div>
<div class="ctn-btn">
  <div class="center">
    <div class="btn yelow">yellow</div>
  </div>
</div>

style.scss

@import "compass/css3";
@import 'compass';
@import url(http://fonts.googleapis.com/css?family=Lobster);
$font:#33a5ca;
$font-ctn:darken($font,5%);
$blue:#000060;
$pink:#bf297a;
$red:#cb2626;
$green:#27bb38;
$yelow:#dca218;
$dark:#222;
$light:#ccc;
@mixin app($color){
@include background(linear-gradient(bottom,$color,lighten($color,10%)));
  border-bottom:solid 4px darken($color,20%);
  font-family:Lobster;
}
@mixin app-hover($color){
  @include background(linear-gradient(bottom,$color,lighten($color,20%)));
}
@mixin letter($color){
  color:darken($color,10);
  text-transform:uppercase;
}
@mixin after($color){
    width:40px;
    height:40px;
    margin-left:-40px;
    margin-top:-41px;
    display:block;
    position:absolute;
    @include background(linear-gradient(bottom,$color,lighten($color,10%)));
    border-bottom:solid 4px darken($color,20%);
    border-radius:3px 0 0 3px;
    border-right:solid 1px rgba(0,0,0,0.3);
}
body{
  @include background($font);
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.center{
  width:200px;
  height:43px;
  margin:25px auto;
  border:solid 5px rgba(0,0,0,0);
  padding-left:40px;
  border-radius:3px;
  background:rgba(0,0,0,.3);
}
.ctn-btn{ 
  width:600px;
  height:100px;
  background:$font-ctn;
  margin:10px auto;
  border-radius:3px;
  border-left:solid 1px #333;
  border-top:solid 1px #333;
  border-top:solid 1px darken($font,10%);
  border-left:solid 1px darken($font,10%);
  border-bottom:solid 1px lighten($font,10%);
  border-right:solid 1px lighten($font,10%);
  box-shadow:inset 0 0 2px #111;
}
.btn{
  width:200px;
  height:40px;
  position:absolute;
  border-radius:0 3px 3px 0;
  cursor:pointer;
  text-align:center;
  line-height:40px;
  font-family:arial,bold;
  color:#111;
}
.btn:first-letter{
    text-transform:uppercase;
    font-size:20px;
}
.pink{
  @include app($pink);
  &:hover{
    @include app-hover($pink);
  }
  &:first-lettre{
    @include letter($pink);
  }
   &:after{
     content:"C";
      @include after($pink);
  }
   &:active{
     border-bottom:solid 2px darken($pink,20%);
     margin-top:2px;
  }
   &:active:after{
     margin-top:-43px;
  }
}
.red{
    @include app($red);
  &:hover{
    @include app-hover($red);
  }
  &:first-lettre{
    @include letter($red);
  }
  &:active{
     border-bottom:solid 2px darken($red,20%);
     margin-top:2px;
  }
  &:after{
     content:"D";
      @include after($red);
  }
  &:active:after{
     margin-top:-43px;
  }
}
.green{
    @include app($green);
  &:hover{
    @include app-hover($green);
  }
  &:first-lettre{
    @include letter($green);
  }
  &:active{
     border-bottom:solid 2px darken($green,20%);
     margin-top:2px;
  }
  &:after{
     content:"E";
      @include after($green);
  }
  &:active:after{
     margin-top:-43px;
  }
}
.yelow{
    @include app($yelow);
  &:hover{
    @include app-hover($yelow);
  }
  &:first-lettre{
    @include letter($yelow);
  }
  &:active{
     border-bottom:solid 2px darken($yelow,20%);
     margin-top:2px;
  }
  &:after{
     content:"F";
      @include after($yelow);
  }
  &:active:after{
     margin-top:-43px;
  }
}
.dark{
    @include app($dark);
     color:#ccc !important;
  &:hover{
    @include app-hover($dark);
  }
  &:first-lettre{
    @include letter($dark);
    
  }
  &:active{
     border-bottom:solid 2px darken($dark,20%);
     margin-top:2px;
  }
  &:after{
     content:"B";
      @include after($dark);
  }
  &:active:after{
     margin-top:-43px;
  }
}
.light{
    @include app($light);
  &:hover{
    @include app-hover($light);
  }
  &:first-lettre{
    @include letter($light);
  }
  &:active{
     border-bottom:solid 2px darken($light,20%);
     margin-top:2px;
  }
  &:after{
     content:"A";
      @include after($light);
  }
  &:active:after{
     margin-top:-43px;
  }
}