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 Author

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 Author

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!

Hacktoberfest is happening now!



It is a month-long celebration of open source. For a lot of devs, its their introduction to open source.


Check out the Hacktoberfest tag on DEV to keep up with the latest!