<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<h1>Directions</h1>
<button class="btn btn-slide-left">Left</button>
<button class="btn btn-slide-right">Right</button>
<button class="btn btn-slide-up">Up</button>
<button class="btn btn-slide-down">Down</button>
<hr>
<h1>Uses</h1>
<button class="btn btn-save"><i class="fa fa-check"></i> Save</button>
<button class="btn btn-cancel"><i class="fa fa-times"></i> Cancel</button>
<button class="btn btn-cont">Continue <i class="fa fa-chevron-right"></i></button>
<button class="btn btn-back"><i class="fa fa-chevron-left"></i> Back</button>
<button class="btn btn-reg">Regular Button</button>

/*Button hover effects using the background property. By creating a hard gradient as the background, you can create a lot of different effects by shifting the background into place! The 'regular button' uses the box-shadow effect found in my other pen, where it is called the glow effect.*/
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic);
body {
  font-family: "Lato", sans-serif;
  background: #eee;
  text-align:center;
  padding-top:10vh;
}
hr{
  margin:3rem;
}
.btn {
  font-family: "Lato";
  text-transform: uppercase;
  font-weight: 300;
  border-radius: 2px;
  background-color: transparent;
  border: 3px solid #333;
  padding: 6px 12px;
  transition: all 0.5s ease;
  cursor:pointer;
}
.btn:hover,
button:hover {
  outline: 0;
  color: #fff;
}
.btn:active,
button:active {
  outline: 0;
  color: #fff;
}
.btn-slide-left {
  background: linear-gradient(to left, transparent 50%, #333 50%);
  background-size: 200% 100%;
  background-position: right bottom;
}
.btn-slide-left:hover {
  background-position: left bottom;
}

.btn-slide-right {
  background: linear-gradient(to right, transparent 50%, #333 50%);
  background-size: 200% 100%;
  background-position: left bottom;
}
.btn-slide-right:hover {
  background-position: right bottom;
}

.btn-slide-up {
  background: linear-gradient(to bottom, transparent 50%, #333 50%);
  background-size: 100% 200%;
  background-position: left top;
}
.btn-slide-up:hover {
  background-position: right bottom;
}

.btn-slide-down {
  background: linear-gradient(to bottom, #333 50%, transparent 50%);
  background-size: 100% 200%;
  background-position: left bottom;
}
.btn-slide-down:hover {
  background-position: right top;
}

.btn-save {
  padding: 0.7em 1.5em;
  border: none;
  color: #fff;
  background: linear-gradient(to bottom, #2980b9 50%, #3498db 50%);
  background-size: 100% 200%;
  background-position: left bottom;
}
.btn-save:hover {
  background-position: right top;
}

.btn-cancel {
  padding: 0.7em 1.5em;
  border: none;
  color: #fff;
  background: linear-gradient(to bottom, #e74c3c 50%, #c0392b 50%);
  background-size: 100% 200%;
  background-position: left top;
}
.btn-cancel:hover {
  background-position: right bottom;
}

.btn-cont {
  padding: 0.7em 1.5em;
  border: none;
  color: #fff;
  background: linear-gradient(to left, #2ecc71 50%, #27ae60 50%);
  background-size: 200% 100%;
  background-position: right bottom;
}
.btn-cont:hover {
  background-position: left bottom;
}

.btn-back {
  padding: 0.7em 1.5em;
  border: none;
  color: #fff;
  background: linear-gradient(to right, #95a5a6 50%, #7f8c8d 50%);
  background-size: 200% 100%;
  background-position: left bottom;
}
.btn-back:hover {
  background-position: right bottom;
}

.btn-reg {
  padding: 0.7em 1.5em;
  border: none;
  color: #fff;
  background: #ff6633;
  box-shadow: inset 0 0 0 0 #ff6633;
}
.btn-reg:hover {
  box-shadow: inset 0 0 0 50px #dd4411;
}