<a href="#" class="btn"><span>Click Click Click! </span></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!
/*Button Two*/

.btn {
  border-radius: 4px;
  background: #614f38;
  border: none;
  padding: 1.5rem 2rem;
  display:inline-block;
  transition: all 0.4s;
  text-align: center;
  cursor: pointer;
  color:#fff;
  span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;

    &:after {
      content: '»';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -20px;
      transition: 0.5s;
    }
  }

  &:hover span {
    padding:0 2rem 0 1rem;

    &:after {
      opacity: 1;
      right: 0;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.