<div class="button_container"> 
   <p class="description">El Karaoke de Joseca</p> 
   <button class="btn"><span>Ingresar!</span></button> 
   <br /><br />
</div>

@import url('https://fonts.googleapis.com/css?family=Amatic+SC'); 
body{ 
  margin: 0; 
  height: 100%; 
  background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%); 
  background-repeat: no-repeat; 
  background-size: cover; 
  background-attachment: fixed; 
} 
.button_container{ 
  position: absolute; 
  left: 0; 
  right: 0; 
  top: 5%; 
} 
.description, .link{ 
  font-family: 'Amatic SC', cursive; 
  text-align: center; 
} 
.description{ 
  font-size: 35px; 
} 
.btn{ 
  border: none; 
  display: block; 
  text-align: center; 
  cursor: pointer; 
  text-transform: uppercase; 
  outline: none; 
  overflow: hidden; 
  position: relative; 
  color: #fff; 
  font-weight: 700; 
  font-size: 15px; 
  background-color: #222; 
  padding: 17px 60px; 
  margin: 0 auto; 
  box-shadow: 0 5px 15px rgba(0,0,0,0.20); 
} 
.btn span{ 
  position: relative; 
  z-index: 1; 
}
.btn:after{ 
  content: ""; 
  position: absolute; 
  left: 0; 
  top: 0; 
  height: 490%; 
  width: 140%; 
  background: #78c7d2; 
  -webkit-transition: all .5s ease-in-out; 
  transition: all .5s ease-in-out; 
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg); 
  transform: translateX(-98%) translateY(-25%) rotate(45deg); 
} 
.btn:hover:after{ 
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg); 
  transform: translateX(-9%) translateY(-25%) rotate(45deg); 
} 
.link{ 
  font-size: 20px; 
  margin-top: 30px; 
} .link a { 
  color: #000; 
  font-size: 25px; 
}