DEV Community

Cover image for How to create an animated button
Stackfindover
Stackfindover

Posted on • Updated on

How to create an animated button

Hello, guys In this tutorial we will try to solve the mentioned query. and also we will learn how to create an animated button.

Common Query

  1. How to create an animated button?
  2. How to a button?
  3. How to create an aurora UI button?

See Also:- How to find a word in a paragraph

How to create an animated button step by step

First, we need to create two files index.html and style.css then we need to do code for it.

Step:#1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Aurora UI Button</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="animated-button-outer">
      <div class="button">
        <span class="one"></span>
        <span class="two"></span>
        <span class="three"></span>
        <span class="four"></span>
        <span class="text">Button</span>
      </div>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step:#2

Then we need to add code for style.css which code I provide in the below screen.

* {
    padding: 0;
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    background-color: #f2f4f6;
}
.animated-button-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.button {
  width: 250px;
  height: 80px;
  background: #fff;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgb(0 0 0 / 50%);
}
.button > span {
  position: absolute;
  filter: blur(50px);
  opacity: 0.8;
}
.button .one {
  width: 600px;
  height: 600px;
  left: -50px;
  top: -300px;
  background: #1b0035;
  z-index: 3;
  transform: rotate(0) translate(80px) rotate(0);
  animation: fly 12s linear infinite;
  -webkit-animation: fly 12s linear infinite;
}
.button .two {
  width: 500px;
  height: 800px;
  background: #3f0069;
  bottom: -30px;
  left: -50px;
}
.button .three {
  width: 450px;
  height: 450px;
  border-radius: 50%;
  bottom: -80px;
  right: -100px;
  background: #ff00aa;
  animation: flyPlus 10s linear infinite;
  -webkit-animation: flyPlus 10s linear infinite;
}
.button .four {
  width: 350px;
  height: 350px;
  bottom: 0;
  right: 0;
  background: #90e0ff;
  margin: auto;
  animation: flyPlus 15s linear infinite;
  -webkit-animation: flyPlus 15s linear infinite;
}
.animated-button-outer .button .text {
  opacity: 1;
  filter: unset;
  left: 0;
  right: 0;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  z-index: 9;
  text-transform: uppercase;
}



@keyframes fly {
  100% {
    transform: rotate(2turn) translate(200px) rotate(-2turn);
    -webkit-transform: rotate(2turn) translate(200px) rotate(-2turn);
    -moz-transform: rotate(2turn) translate(200px) rotate(-2turn);
    -ms-transform: rotate(2turn) translate(200px) rotate(-2turn);
    -o-transform: rotate(2turn) translate(200px) rotate(-2turn);
  }
}


@keyframes flyPlus {
  100% {
    transform: rotate(-2turn) translate(200px) rotate(2turn);
    -webkit-transform: rotate(-2turn) translate(200px) rotate(2turn);
    -moz-transform: rotate(-2turn) translate(200px) rotate(2turn);
    -ms-transform: rotate(-2turn) translate(200px) rotate(2turn);
    -o-transform: rotate(-2turn) translate(200px) rotate(2turn);
}
}
Enter fullscreen mode Exit fullscreen mode

How to create an animated button video output:

How to create an animated button Codepen Output:

We will update soon:)

Top comments (5)

Collapse
 
grahamthedev profile image
GrahamTheDev

Every one of their posts has “we will update soon” so I wouldn’t hold your breath.

It is a shame as some of the stuff they create is good, but the “we will update soon” and then never updating isn’t the way to build a following on here.

Collapse
 
stackfindover profile image
Stackfindover

I know it's very difficult on youtube to output, I'm working on updating my post, I will definitely update my all post in few days.
Thanks for your patient :)

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

It will be more interesting if you can add a codepen project for this button.

Collapse
 
stackfindover profile image
Stackfindover

I know it's very difficult on youtube to output, I'm working on updating my post, I will definitely update my all post in few days.
Thanks for your patient :)

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

that's a nice thing!