How to create A Beautiful Animated CSS Border (Step by step Tutorial) || 2021

Subscribe to my newsletter and never miss my upcoming articles

Hey there , this is an awesome menu created in pure CSS for beginners.

All the source code need are given below in the post and all you need is just to copy paste the code and create your dream CSS Menu.

This is a best project for anyone who started coding.

Skills used:

  • CSS
  • HTML

Yes only this much.

Get the interactive vedio tutorial.

Share the link: https://youtu.be/5DogMDD8eWA

Get started

The main index.html code is:



    <div class="gradient-border" id="box">
        CSS <br> Animated <br> Border
    </div>

The styling part is as follow:

        @import url('https://fonts.googleapis.com/css?family=Raleway:200');

html, body {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: #1D1F20;
}
#box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 200px;
  color: white;
  font-family: 'Raleway';
  font-size: 2.5rem;
}
.gradient-border {
  --borderWidth: 3px;
  background: #1D1F20;
  position: relative;
  border-radius: var(--borderWidth);
}
.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  -webkit-animation: animatedgradient 3s ease alternate infinite;
          animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}


@-webkit-keyframes animatedgradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


@keyframes animatedgradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

You may also like:

Node.js Cracker cheatsheet || 2021 MUST WATCH for beginners - part #2

youtu.be/ajTDDm6lfUQ

Ultimate CSS Code Generator tool on the web! 2021 Free

youtu.be/zjPbREldtOY

Animate anything by just 1 line of JS Code! 2021 || Motionia.js

youtube.com/watch?v=tHcFjDVqn-Q&feature..

People looking for:

Buttons, coding, programing , webdevelopment, skills, tutorials

#coding #programing #webdevelopment #CSS

No Comments Yet