Categories
Web development

CSS Rainbow border/ button Animation


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

Categories
CSS Web development

Pure CSS Rainbow Text Animation

Pure CSS Rainbow text

The colours of the rainbow are Red, Orange, Yellow, Green, Blue, Indigo(*colour between blue and purple) and Violet.

I will use exactly these colours to create the rainbow text and the animation.

Demo:

*to see the code output on the website click here.

To create the CSS Rainbow Text Effect and the Animation follow the steps below and watch the video tutorial:

Step1.

Add HTML

<div class="rainbowText">RAINBOW TEXT</div>

Step2.

Add CSS

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

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

Style your text.

Create the linear-gradient with 7 colours of the rainbow:

.rainbowText {
  font-family:arial black;
  font-size:70px;
  background-image: 
    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
  animation: move 35s linear infinite;
CSS Rainbow text effect

Step3.

Add CSS Animation

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

To see the live output of the animation go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Sliced Text Effect

CSS Mirror/ Reflection Text Effect

Text Effects

How to create a rainbow effect in Photoshop?

How to create a rainbow effect in Photoshop? It’s easy! Follow the steps below and watch the video tutorial.

Rainbow Effect in Photoshop

In the first part of this tutorial we’ll create the rainbow, and in the second part rainbow effect letters.

Step 1.

Create the new document, and by using Eclipse Tool draw seven circles in different colours.

Tip: Hold the shift key while drawing your circle and it will keep perfect proportions.

Rainbow effect Photoshop
rainbow Photoshop

Step2.

On the layer panel, click on the eyeball to hide the background.

Rainbow in Adobe Photoshop

Hit the right mouse button on the first eclipse and select “Merge Visible“.

Rainbow Effect

You can notice the all seven circles merged in one layer (rainbow layer):

Rainbow Photoshop

Step 3.

Select the Magic Wand Tool and click on the eclipse in the middle of the circle.

Rainbow Effect Photoshop

and hit the delete key.

Rainbow Adobe Photoshop

Use Rectangular Marquee Tool and select around half of our circle and hit the delete key.

Rainbow Adobe Phtoshop
Rainbow in Phtoshop

Step 4.

By clicking the right mouse button on the rainbow layer choose Blending Options…

Rainbow in Adobe Photoshop

Tick Bevel & Emboss, and Contour. Change the Highlight Mode to Color Dodge:

Rainbow Photoshop
Rainbow Adobe Photoshop

Your rainbow is ready. Add background and style the image as you like.

Rainbow Adobe Photoshop

Let’s add some rainbow text to our rainbow image.

Step1.

Create a new document, and draw colourful squares all over.

Rainbow text Adobe Photoshop

Step2.

Go to Edit->Define Pattern…

Rainbow Text Effect Adobe Photoshop
Rainbow Text Photoshop

Step 3.

Use Horizontal Type Tool, choose the font and font size and type your text on your rainbow image:

Rainbow text effect Photoshop

Click by right mouse button on the text layer and select Blending Options…

Rainbow text

Select Pattern Overlay, click on Pattern and choose your new rainbow pattern.

Rainbow Effect Photoshop

Set the Scale to 35%:

Rainbow Photoshop

Select Bevel & Emboss, and Contour.

Rainbow Text Photoshop

Ready!

Rainbow Text and Rainbow

Watch also the video tutorial:

Read also:

Photoshop Tutorials

How to create Bubbles in Photoshop?