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

Thumbnail
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 Codepen.io
Copyright jainulhuq ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

  <h1>CHANGE COLOR TEXT</h1>

<h2>ChangeMe</h2>

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

</body>

</html>

/*Downloaded from https://www.codeseek.co/jainulhuq/change-text-color-timilly-dvarMw */
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;
}

Comments