@import url('https://fonts.googleapis.com/css?family=asap');

*{
  transition: .7s;
  font-family: 'asap', sans-serif;
}
body {
  background: linear-gradient(130deg,#11B2B2, #084359);
  opacity:.9;
}
div {
  position: absolute;
  top: 42%;
  left: 43%;
}

a {
  display: inline-block;
  padding: 0px 15px;
  border-radius: 7px;
  opacity: 0.9;
  background: linear-gradient(310deg,rgba(255,0,0,.1), #303030);
  text-decoration:none;
  box-shadow: 0 12px 20px 0 rgba(0, 0, 0, 0.2), 0 20px 28px 0 rgba(0, 0, 0, 0.1);
  color:white;
  text-transform: uppercase;
  animation-name:show;
  animation-duration: 2s;
  animation-delay: .5s;
  position:relative;
}

@keyframes show {
  from {opacity:0; left: -10px;}
  to {opacity:.9; left: 0px;}
}

a:hover {
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2), 0 5px 7px 0 rgba(0, 0, 0, 0.1);
  text-shadow: 2px 2px rgba(0, 0, 0, 0.4);
  background: linear-gradient(300deg,rgba(155,155,155,.3), #303030);
  transform: translateY(5px);
}