<!-- animated button -->

<a href="#" class="btn">
  <span class="btn-label">Submeter</span>
</a>

@import url(https://fonts.googleapis.com/css?family=Exo+2:400,200italic);

body {
  background:#f5f1e7;
}

.btn {
  background:transparent;
  text-align:center;
  letter-spacing:1px;
  font-size:1.4em;
  line-height:1.2em;
  font-weight:300;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  width:200px;
  height:20px;
  padding:20px 0;
  border:1px solid #363858;
  overflow:hidden;
  display:inline-block;
  transition:all 0.5s;
  box-shadow:0px 3px 0px #363858;
  border-radius: 4px;
}

.btn:hover, .btn:active {
  text-decoration: none;
  color:#fff;
  border-color:#363858;
  background:#363858;
  box-shadow:0 0 0 #363858;
}

.btn-label {
  display:inline-block;
  position:relative;
  padding-right:0;
  transition:padding-right 0.5s;
  color:#363858;
  font-family: 'Exo 2', sans-serif;
  font-weight:200;
}
.btn-label:after {
  content: "";
  position:absolute;
  right:-50px;
  opacity:0;
  top:22%;
  width:10px;
  height:10px;
  margin-right:-10px;
  background:rgba(0,0,0,0);
  border:3px solid #fff;
  border-top:none;
  border-right:none;
  transition: opacity 0.5s, top 0.5s, right 0.5s;
  transform:rotate(225deg);
}

.btn:hover .btn-label,
.btn:active .btn-label {
  padding-right:30px;
  color:#f5f1e7;
}

.btn:hover .btn-label:after,
.btn:active .btn-label:after {
  transition:opacity: 0.5s, top 0.5s, right 0.5s;
  opacity:1;
  right:10px;
  top:22%;
}