CSS code
<style> 
/*Modified text-animation visit more code http://saein.mobie.in, Link sumber jangan dihapus. hargailah hasil karya orang lain!.*/ 
body { 
background-color: black;
}    
h3 { 
 background-color: silver;
 border-radius: 5px; 
 color: red;
}
h6 {
 color: white; 
 font-size: 20px;
} 
a {
  color: red;
}
 
.wetenge {
	perspective-origin: 0; 
}

.wetenge span {
	cursor: pointer;
	display: inline-block;
	font-size: 40px;
	user-select: none;
        font-family: Libre Baskerville, serif; text-shadow:11px 12px 12px rgba(0,0,0,0.2), -1px -1px 1px darkgray, 1px 1px 0 darkgray, 3px 3px 0 silver, 4px 4px 0 darkgray, 5px 5px 0 silver, 6px 6px 0 darkgray, 7px 7px 0 silver, 8px 8px 0 darkgray, 9px 9px 0 silver, 10px 10px 0 darkgray, 11px 11px 0 silver; color: white; font-size:70px; font-weight: bold;
}

.wetenge span:nth-child(1).active {
	animation: njengat-hurufe 1.5s ease-out;
	transform-origin: 0% 100% 0px;
}

@keyframes njengat-hurufe {
	0%, 100% {
		transform: rotate(0deg);
	}
	
	30%, 60% {
		transform: rotate(-45deg);
	}
}

.wetenge span:nth-child(2).active {
	animation: mumbul-hurufe 1s ease-in-out;
	transform-origin: bottom center;
}

@keyframes mumbul-hurufe {
	10%, 35% {
		transform: scale(2, .2) translate(0, 0);
	}
	
	45%, 50% {
		transform: scale(1) translate(0, -150px);
	}
	
	80% {
		transform: scale(1) translate(0, 0);
	}
}

.wetenge span:nth-child(3).active {
	animation: sengkleh-hurufe 2s ease-out;
	transform-origin: bottom center;
}

@keyframes sengkleh-hurufe {
	12% {
		transform: rotateX(240deg);
	}
	
	24% {
		transform: rotateX(150deg);
	}
	
	36% {
		transform: rotateX(200deg);
	}
	
	48% {
		transform: rotateX(175deg);
	}
	
	60%, 85% {
		transform: rotateX(180deg);
	}
	
	100% {
		transform: rotateX(0deg);
	}
}

.wetenge span:nth-child(4).active {
	animation: nylinguk-hurufe 1s ease-out;
}

@keyframes nylinguk-hurufe {
	20%, 80% {
		transform: rotateY(180deg);
	}
	
	100% {
		transform: rotateY(360deg);
	}
}

.wetenge span:nth-child(5).active {
	animation: mulur-hurufe 2s linear;
}

@keyframes mulur-hurufe {
	10%, 40% {
		transform: translateY(-48vh) scaleY(1);
	}
	
	90% {
		transform: translateY(-48vh) scaleY(4);
	}
}
.wetenge span:nth-child(6).active {
	animation: mlintir-hurufe 1.4s ease-out;
}
@-webkit-keyframes mlintir-hurufe {
  0%{
	opacity: 0;
	-webkit-transform: scale3d(0.3, 0.3, 0.3) rotate(720deg);
	transform: scale3d(0.3, 0.3, 0.3) rotate(720deg);
  }
  30%{
	opacity: 1;
	-webkit-transform: scale3d(1,1,1) rotate(15deg);
	transform: scale3d(1,1,1) rotate(15deg);
  }
  100%{
	opacity: 1;
	-webkit-transform: scale3d(1,1,1) rotate(15deg);
	transform: scale3d(1,1,1) rotate(15deg);
  }
}
.wetenge span:nth-child(7).active {
	animation: modod-hurufe 1.6s ease-out;
}
@keyframes modod-hurufe {
  20%{
	-ms-transform: scale(1.3);
	transform: scale(1.3);
  }
  50%{
	-ms-transform: scale(1.10);
	transform: scale(1.10);
  }
  100%{
	-ms-transform: scale(2.3);
	transform: scale(2.3);
  }
}

/* Terusane kiyeh */

.nduwur {
	background-color: white; 
        margin-bottom: 0;
}
.pencetane { 
         border:2px solid; 
         border-color:#FF0000 #FF0000 #FF0000 #FF0000;
         background-color:maroon;
         border-radius:25px;
         width: 50%; 
         padding: 5px 10px; 
         font-size: 20px; 
         color: white;
} 
#tombol { 

  border: 0 solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, 0.5);
  outline-offset: 0px;
  text-shadow: none;
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

#tombol:hover {
  border: 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px #427388;
}
</style>