A Pen by Arlekino.

button-style-2.markdown

button style 2

A Pen by Arlekino on CodePen.

License.

index.html

<button>Submit</button>
<button>Cancel</button>

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600);


@import "compass/css3";
  

body,html {
  padding: 0;
  margin:  0;
  
}

body {
  padding: 100px; 
}

button {
  border: 0;
  background: none;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  outline: 0;
  width: auto;
  margin: 0 10px;
  padding: 10px 20px;
  
  @include perspective( 300 );
  @include backface-visibility( hidden );
  @include transition( all .15s );

  
  &:before, &:after {
    border: 2px solid #333;
    width: 100%;
    height: 5px;
    left: -1px;
    content: '';
    position: absolute;

  }
  
  &:before {
    top: 0;
    border-bottom: 0;
    -webkit-transform: rotateY(0deg);
    -webkit-transition: all .5s ease-out;
  }
  &:hover:before {
    -webkit-transform: rotateY(360deg);
    height: 22px;
    border-width: 1px;
  }
  
  &:after {
    bottom: 0;
    border-top: 0;
    -webkit-transform: rotateY(0deg);
    -webkit-transition: all .5s ease-in;
  }
   
  &:hover:after {
    -webkit-transform: rotateY(360deg);
    height: 21px;
    border-width: 1px;
  } 
  
  &:hover {
    -webkit-transform: scale(0.9);
  }
  &:active {
    background-color: #333;
    color: #fff;
    -webkit-transform: scale(0.85);
  }
}