<div class="funny"><center><h1 class=name>Funny cats :)))) </h1>
<button id="btn" class="cat" onclick="let name=prompt('If you want catch the cat, please say us, what is your name?'),';h1.name='+name+';);">CATCH THE CAT!</button></center></div>
  
div.funny{
  background-color:red;
  color:white;
  border-color: blue, green, 6px;
  border-radius:1000px;
  padding:100px;
  font-family:cursive;
  font-style:italic;
  font-size:40px;
  animation-name:funnycats;
  position: relative;
}
button.cat{
  border-radius:1000px;
  font-size:20px;
  color:white;
  background-color:blue;
  border:none;
  }
div.funny:hover{
  font-size:40px;
  background-color:green;
  color:yellow;
  animation-name:funnycats;
  animation-duration:4s;
    animation-iteration-count: infinite;
}
@keyframes funnycats{
  0% {background-color:red;position:left;};
  25% {background-color:black;position:right;};
  50% {background-color:purple;position:top;};
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.