<a href="#" class="btn">Click Click Click!</a>
// reset & normalize
*{text-decoration:none;}
html{
  font-size:62.5%; // 62.5% = 1rem = 10px
    padding: 3rem;
  color: #614f38;
}
body {
  font-size:1.6rem;
}
// Start!
$defCol : #543618;
a.btn {
  display: inline-block;
  border:1px solid;
  color: #543618;
  padding: 1rem 1.5rem;
  justify-content: center;
  border-radius: .3rem;
  transform: translateY(0px);
  transition:all .2s;
  background:rgba($defCol,.03);
  &:hover {
    background:#fff;
    transform: translateY(-3px);
    box-shadow: 0 .3rem 0 $defCol;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.