Change text color timilly

In this example below you will see how to do a Change text color timilly with some HTML / CSS and Javascript

This awesome code was written by jainulhuq, you can see more from this user in the personal repository.
You can find the original code on
Copyright jainulhuq ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Change text color timilly</title>
      <link rel="stylesheet" href="css/style.css">





<button class="btn">button</button>



/*Downloaded from */
h1 {
    color: #f47a58;
    background-image: -webkit-linear-gradient(180deg,#f47a58,#13ce7c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 5s infinite linear;

@-webkit-keyframes hue {
    from {
      -webkit-filter: hue-rotate(0deg);
    to {
      -webkit-filter: hue-rotate(360deg);


h2 {
	-webkit-animation-direction: normal;
	-webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-name: colours;
	-webkit-animation-timing-function: ease;

@-webkit-keyframes colours {
	  0% {color: #39f;}
	 15% {color: #8bc5d1;}
	 30% {color: #f8cb4a;}
	 45% {color: #95b850;}
	 60% {color: #944893;}
	 75% {color: #c71f00;}
	 90% {color: #bdb280;}
	100% {color: #39f;}

.btn {
  color: #31302B;
    background: #FFF;
    padding: 12px 17px;
    margin: 25px;
    border: 1px solid #31302B;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 2px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 #fc6076;
	-webkit-transition: all ease 0.8s;
	-moz-transition: all ease 0.8s;
	transition: all ease 0.8s;
  background-image: linear-gradient(120deg, #fc6076 0%, #ff9a44 100%);
.btn:hover {
    box-shadow: inset 100px 0 0 0 #fc6076;
    color: #fff;