<div class="wrap">
      <a href="#" class="button">Hover Me!</a>
  </div>

body {
  background-image: url(http://p1.pichost.me/i/11/1344899.jpg);
  background-size: cover;
  background-repeat: no-repeat;
   font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 14px;
}

.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -86px;
  margin-left: -89px;
  text-align: center;
}

a {
  transition: 0.3s all;

  display: block;
  margin: 20px auto;
  max-width: 180px;
  text-decoration: none;
  border-radius: 4px;
  padding: 20px 30px;
  border: 1px solid rgba(30, 22, 54, 0.7);
}

a.button {
  color: rgba(30, 22, 54, 0.6);
}

a.button:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(30, 22, 54, 0.7);
}