A Pen by Karol Falkiewicz.

[CSS3]-3d-button.markdown

[CSS3] 3d button

CSS3 3d button, made in SCSS

A Pen by Karol Falkiewicz on CodePen.

License.

index.html

<a href="#" class="button">CLICK</a>

script.js

/*
/ What?: CSS3 Button in SCSS
/ Who?: Karol "Nosenation" Falkiewicz
/ Email: [email protected]
/
/
/ PS: Check this colors: #12A65C, #08A6A6
*/

style.scss

@import "compass/css3";
$font_size: 22px;
$width: 124px;
$height: 44px;
$bg: #CC4331;
$bg_hover: lighten($bg, 5%);
$txt_color: white;
$bg_shadow: rgba(0,0,0,0.4);

@mixin middle($width, $height) {
  position: absolute;
  top: 50%;
  left: 50%;
  width: $width;
  height: $height;
  margin-top: (-$height)/2;
  margin-left: (-$width)/2; 
}

html {
  width: 100%;
  height: 100%;
}

body {
  @extend html;
  font-family: sans-serif;
  background-image: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/retina_wood.png);
}

.button {
  display: block;
  font-size: $font_size;
  text-align: center;
  line-height: $height;
  text-decoration: none;
  color: $txt_color;
  background-color: $bg;
  border-radius: 4px;
  @include middle($width, $height);
  @include text-shadow(0 -1px -1px darken($bg, 7%));
  @include box-shadow(
    0 4px 0 darken($bg, 7%),
    0 5px 5px 1px $bg_shadow);
  @include transition(all .15s ease-in-out);
  
  &:hover{
    background-color: $bg_hover;
    @include text-shadow(0 -1px -1px darken($bg_hover, 7%));
    @include box-shadow(
      0 4px 0 darken($bg_hover, 7%),
      0 5px 5px 1px $bg_shadow);
  }
  &:active {
    margin-top: (-$height)/2 + 4;
    @include box-shadow(none);
  }
}