<head>
  <title>Submit Button Animation</title></head>
  
<body>
  <button class="button outline"><h2 class="submit">Submit</h2></button>
</body>
/*The background of this pen*/
body {
  background-color: lightgreen;
}

/*The "Submit" Text*/
.submit {
  color: black;
  position: absolute;
  margin-top: -14px;
  margin-left: 6px;
  font-family: Comic Sans MS;
}

/*What happens when you click the text*/
submit:focus {
  color: white;
  animation-name: submittext;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

/*Animation when you click the text*/
@keyframes submittext {
  0% {color: black; innerHTML="Submit"}
  90% {color: white; innerHTML="Done!"}
  100% {color: white; innerHTML="Done!"}
}

/*Outline of the Button*/
.outline {
  color: black;
  width: 100px;
  height: 50px;
  border: 5px solid;
}

/*The Main Button Part*/
.button {
  position: relative;
  /*Feel free to change this position part*/
  margin-top: 250px;
  margin-left: 240px;
  background-color: gray;
  /*End of position part*/
  width: 100px;
  height: 50px;
  transition-property: background-color;
  transition-duration: 0.3s;
}

/*What happens when you hover on button*/
button:hover {
  background-color: white;
}

/*What happens when you click on button*/
button:focus {
  background-color: black;
  animation-name: submitanimation;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

/*Animation when you click button*/
@keyframes submitanimation {
  0% {width: 100px; height: 50px; transform: rotate(0deg); margin-top: 250px;}
  /*10% {width: 100px; height: 50px; transform: rotate(36deg);  margin-top: 250px; margin-left: 150;}
  20% {width: 100px; height: 50px; transform: rotate(72deg);  margin-top: 250px; margin-left: 150;}*/
  
  /*MARGIN-LEFT 40PX DIFFERENCE*/
  25% {width: 100px; height: 50px; transform: rotate(90deg);  margin-top: 300px;}
  /*30% {width: 100px; height: 50px; transform: rotate(108deg);  margin-top: 250px; margin-left: 150;}
  40% {width: 100px; height: 50px; transform: rotate(144px);  margin-top: 250px; margin-left: 150;}*/
  
  /*MARGIN-LEFT 20PX DIFFERENCE, MARGIN-TOP 40PX DIFFERENCE*/
  50% {width: 100px; height: 50px; transform: rotate(180deg);  margin-top: 250px;}
  /*60% {width: 100px; height: 50px; transform: rotate(216deg);  margin-top: 250px; margin-left: 150;}
  70% {width: 100px; height: 50px; transform: rotate(252deg);  margin-top: 250px; margin-left: 150;}*/
  
  /*MARGIN-LEFT 20PX DIFFERENCE, MARGIN-TOP 40PX DIFFERENCE*/
  75% {width: 100px; height: 50px; transform: rotate(270deg);  margin-top: 200px;}
  /*80% {width: 100px; height: 50px; transform: rotate(288deg);  margin-top: 250px; margin-left: 150;}
  90% {width: 100px; height: 50px; transform: rotate(324deg); margin-top: 250px; margin-left: 150;}*/
  
  /*MARGIN-LEFT 40PX DIFFERENCE*/
  100% {width: 100px; height: 50px; transform: rotate(360deg); margin-top: 250px;} 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.