Categories
Web development

CSS Rainbow border/ button Animation

Learn how to create the Rainbow border/ button Animation with HTML and CSS.


CSS Rainbow border/ button Animation

To create the CSS Rainbow border/ button Animation follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="button"></div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: black;
}

Create the border and style the text:

.button {
  position: relative;
  width: 250px;
  height:100px;
  background-image: 
    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
  cursor: pointer;
}

.button:before {
  content:"";
  position: absolute;
  width: 240px;
  height: 90px;
  background-color: black;
  top:5px;
  left:5px;
}

.button:after {
  content:"Hover Me";
  position: absolute;
  transform: translate(-50%,-50%);
  top:50%;
  left:50%;
  font-family: arial;
  font-weight: 900;
  font-size: 25px;
  background-image: 
    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}

Animate the text and the border on hover:

@keyframes move {
	to {
		background-position: 2500vh;
	}
}

.button:hover {
  animation: move 30s linear infinite;
}

.button:hover:after {
  animation: move 29s linear infinite;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Slide Text Animation/ Sliding Text Effect

CSS Typing Effect

CSS flip text effect / animation