A Pen by Mark Cummins.

index.html

<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->

<section class="content">
  <header>
    <h1 class="page-title">pressable buttons</h1>
  </header>
  <a class="button" href="#">a</a>
  <button class="button" type="button">button</button>
  <input class="button" type="submit" value="input" />
</section>

pressable-buttons.markdown

pressable buttons

for buttons that, when pressed, feel and behave like real world buttons..

A Pen by Mark Cummins on CodePen.

License.

style.scss

@import "compass/css3";
// ----- COMPASS IMPORTS ----- \\

@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
@import "compass/css3/text-shadow";
@import "compass/css3/transition";
@import "compass/css3/transform";

// ----- STYLES ----- \\

body{
  background-color: teal;
  font-family: 'open sans', arial, sans-serif;
  font-size: 1em; // 16px
  line-height: 1.5; // 1.5x the font-size
}

a{
  text-decoration: none;
}

button, input{
  border: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.content{
  margin: 2em auto; // 32px
  width: 80%;
  text-align: center;
}

.page-title{
  font-size: 1.5em; // 24px
  text-transform: uppercase;
  color: #033;
  @include text-shadow(0 .0625em 0 rgba(white, .2)); // x0 y1px blur0
}

.button{
  position: relative;
  display: inline-block;
  outline: 0;
  margin: 1em; // 16px
  padding: .5em 1em; // 8px 16px
  @include border-radius(.125em); // 2px
  background-color: #099;
  @include box-shadow(0 .25em 0 0 #008080, 0 .25em 0 .125em rgba(black, .1)); // 0 4px 0 0, 0 4px 0 2px
  color: white;
  @include text-shadow(0 .0625em 0 rgba(black, .2)); // x0 y1px blur0
  cursor: pointer;
  @include transition-property(all);
  @include transition-duration(.25s);
  @include transition-timing-function(ease);
  
  &:hover{
    background-color: #00b3b3;
    @include box-shadow(0 .25em 0 0 #099, 0 .25em 0 .125em rgba(black, .1)); // 0 4px 0 0, 0 4px 0 2px
  }
  
  &:focus{
    background-color: #00b3b3;
    @include transform(translate(0, .125em)); // 0 2px
    @include box-shadow(0 .125em 0 0 #099, 0 .125em 0 .125em rgba(black, .2)); // 0 2px 0 0, 0 2px 0 2px
  }
  
  // mozilla specific fix for outline when using tab
  &::-moz-focus-inner{
    border: 0;
  }
  
  &:active{
    @include transform(translate(0, .125em)); // 0 2px
    @include box-shadow(0 .125em 0 0 #099, 0 .125em 0 .125em rgba(black, .2)); // 0 2px 0 0, 0 2px 0 2px
  }
}