Submit Button Animation | Button Animation with Source Code | #untoldcoding

The humble submit button may seem like a small detail, but it plays an important role in your website or application. It’s the final step in the user’s journey, as they commit to their practice. But let’s face it, a standard submit button should be, well, standard. They blend into the background and cannot be distracted or reacted to.

Step 1 Html Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Button ANimation | untoldcoding</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <button id="js-btn" class="btn btn-green btn-lg">
      <span class="text">Submit</span>
      <div class="timer">
        <svg
          id="js-timer"
          viewBox="0 0 120 120"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="60" cy="60" r="55" />
        </svg>
      </div>
      <div class="icon-success">
        <svg viewBox="0 0 50 45" xmlns="http://www.w3.org/2000/svg">
          <path d="M20,42 L3, 25" />
          <path d="M20,42 L47,3" />
        </svg>
      </div>
    </button>

<button id="js-reset" class="btn btn-sm btn-black top-left">Reset</button>

button.addEventListener("click", doSubmit);
      reset.addEventListener("click", resetButton);

function doSubmit() {
        if (button.classList.contains("do-submit")) {
          return;
        }

button.classList.add("do-submit");

setTimeout(function () {
          doTimer(0);
        }, 1200);

setTimeout(function () {
          doTimer(15);
        }, 1200);

setTimeout(function () {
          doTimer(75);
        }, 2000);

setTimeout(function () {
          doTimer(100);
        }, 2800);
      }

function doTimer(amountLoaded) {
        timer.style.strokeDashoffset = 3.83 * (100 - amountLoaded) + "px";

if (amountLoaded === 100) {
          setTimeout(function () {
            button.classList.add("success");
          }, 500);
        }
      }

function resetButton() {
        button.classList.add("reset");
        setTimeout(function () {
          button.classList.remove("success");
          button.classList.remove("do-submit");
          button.classList.remove("reset");
        }, 500);

timer.style.strokeDashoffset = "383px";

time = 90;
      }
    </script>
  </body>
</html>

Step 2 CSS Code :

body,
button,
div,
span,
svg {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

svg {
  width: 100%;
  height: 100%;
}

.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
  font-family: "Work Sans", sans-serif;
  transition: all 0.5s ease-in-out;
  outline: none;
}

.btn-lg {
  width: 380px;
  height: 120px;
  border: 5px solid;
  border-radius: 60px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 1.5px;
}

.btn-sm {
  width: 100px;
  height: 40px;
  border: none;
  border-radius: 3px;
  font-size: 16px;
}

.btn-green {
  color: #2b83cb;
  background: transparent;
  border-color: #2b83cb;
}
.btn-green:hover {
  color: white;
  background: #2b83cb;
}

.btn-black {
  color: white;
  background: rgb(169, 169, 169);
}
.btn-black:hover {
  background: black;
}

.timer {
  position: absolute;
  left: calc(50% - 120px / 2);
  width: 120px;
  height: 120px;
  opacity: 0;
}
.timer svg {
  fill: none;
  stroke: #2b83cb;
  stroke-width: 10px;
  transform: rotate(-0.25turn);
  transform-origin: center center;
  stroke-dasharray: 383;
  stroke-dashoffset: 383;
  transition: stroke-dashoffset 0.3s ease-in-out;
}

.icon-success {
  position: absolute;
  top: 35px;
  left: calc(50% - 50px / 2);
  width: 50px;
  height: 45px;
  border: black;
}
.icon-success svg {
  fill: none;
  stroke: white;
  stroke-width: 6px;
  stroke-linecap: round;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  transition: stroke-dashoffset 0.2s 0.2s linear;
  opacity: 0;
}

.do-submit {
  color: white;
  background: #2b83cb;
  border-color: #2b83cb;
  -webkit-animation: closeButton 0.3s 0.3s ease-in forwards;
  animation: closeButton 0.3s 0.3s ease-in forwards;
}
.do-submit .text {
  -webkit-animation: hideText 0.3s forwards;
  animation: hideText 0.3s forwards;
}
.do-submit .timer {
  transition: opacity 0.1s 0.6s linear;
  opacity: 1;
  z-index: 1;
}

.success {
  border-color: #2b83cb;
  -webkit-animation: openButton 0.3s ease-in forwards;
  animation: openButton 0.3s ease-in forwards;
}
.success .timer {
  opacity: 0;
  transition: opacity 0.01s linear;
}
.success .icon-success svg {
  opacity: 1;
  stroke-dashoffset: 0;
}

.reset {
  -webkit-animation: resetButton 0.5s ease-in forwards;
  animation: resetButton 0.5s ease-in forwards;
}
.reset .icon-success {
  opacity: 0;
}
.reset .text {
  -webkit-animation: showText 0.8s ease-in forwards;
  animation: showText 0.8s ease-in forwards;
}

@-webkit-keyframes closeButton {
  90% {
    width: 120px;
    height: 120px;
    background: white;
    border-width: 10px;
    border-color: #bbbbbb;
  }
  100% {
    width: 120px;
    height: 120px;
    background: white;
    border-width: 10px;
    border-color: #bbbbbb;
    border-radius: 50%;
  }
}
@keyframes closeButton {
  90% {
    width: 120px;
    height: 120px;
    background: transparent;
    border-width: 10px;
    border-color: #bbbbbb;
  }
  100% {
    width: 120px;
    height: 120px;
    background: transparent;
    border-width: 10px;
    border-color: #bbbbbb;
    border-radius: 50%;
  }
}
@-webkit-keyframes openButton {
  from {
    width: 120px;
    height: 120px;
    background: white;
    border-color: #2b83cb;
    border-width: 10px;
    border-radius: 50%;
  }
  90% {
    width: 380px;
    height: 120px;
    background: #2b83cb;
    border-width: 5px;
  }
  100% {
    width: 380px;
    height: 120px;
    background: #2b83cb;
    border-color: #2b83cb;
    border-width: 5px;
    border-radius: 60px;
  }
}
@keyframes openButton {
  from {
    width: 120px;
    height: 120px;
    background: white;
    border-color: #2b83cb;
    border-width: 10px;
    border-radius: 50%;
  }
  90% {
    width: 380px;
    height: 120px;
    background: #2b83cb;
    border-width: 5px;
  }
  100% {
    width: 380px;
    height: 120px;
    background: #2b83cb;
    border-color: #2b83cb;
    border-width: 5px;
    border-radius: 60px;
  }
}
@-webkit-keyframes resetButton {
  to {
    background: white;
    color: #2b83cb;
  }
}
@keyframes resetButton {
  to {
    background: white;
    color: #2b83cb;
  }
}
@-webkit-keyframes hideText {
  from {
    opacity: 1;
    transform: scaleX(1);
  }
  20% {
    transform: scaleX(1.1);
  }
  40% {
    opacity: 1;
    transform: scaleX(1);
  }
  to {
    opacity: 0;
  }
}
@keyframes hideText {
  from {
    opacity: 1;
    transform: scaleX(1);
  }
  20% {
    transform: scaleX(1.1);
  }
  40% {
    opacity: 1;
    transform: scaleX(1);
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes showText {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes showText {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.top-left {
  position: absolute;
  top: 30px;
  left: 20px;
}

Join us on Telegram : Click here.

Join with us YouTube : Click here.

Join with us Instagram: Click here.

Why do we give life? The power of clicks:

Adding animation to your submit button goes beyond just aesthetics. it:

It engages users to:

Dynamic buttons attract attention and encourage interaction.

It increases the response rate:

The animation shows that the button is pressed.

Your brand day:

Choose animations that match your website’s personality and style.

Animation arsenal Techniques at your fingertips:

CSS provides a great tool to make your submit button interesting:

Changes made:

Play with properties like scale, rotate, and translate to make buttons shake, drag, or even do a victory dance!

Transitions: Define the duration, timing, and spontaneity of an animation through transition attributes, for smoother and more efficient movement.

Pseudo-classes:

Use the power of the :hover and :active pseudo-classes to create animations on hover and click, and add interactivity.

Key features:

For complex animation, use @keyframes to create custom animation sequences, such as morphing button shapes or loading spinners.

Inspiration Station: Fuel Your Creativity:

Feeling shocked? Check out these resources for rocking inspiration:

CodePen: Explore the largest collection of interactive button animations created by experienced developers.

Dribbble: Explore unique animation techniques and techniques used in real-world web design projects.

CSS Animation Gallery: Learn from interactive examples that demonstrate the power of CSS animation.

Why Make your Submit button Animated?

The benefits of an animated submit button go beyond aesthetics. Here are some key reasons to consider it:

Increased engagement: Well-designed graphics capture attention and make the presentation process more interactive.

Improved feedback: Animations can visually confirm that a user’s action is recorded, reducing confusion and frustration.

Improved conversion rate: By highlighting the button and making it more visually appealing, you can encourage users to complete the desired action.

Branding & personality: Unique animations can reflect your brand personality and create a more memorable user experience.

Submit Button Animation | Button Animation with Source Code | #untoldcoding

Step 1 Html Code :

Step 2 CSS Code :

Join us on Telegram : Click here.

Join with us YouTube : Click here.

Join with us Instagram: Click here.

Why do we give life? The power of clicks:

Post a Comment

No comments

Categories

Popular Post

Random Posts

Recent Posts

Popular Posts

Submit Button Animation | Button Animation with Source Code | #untoldcoding

Step 1 Html Code :

Step 2 CSS Code :

Join us on Telegram : Click here.

Join with us YouTube : Click here.

Join with us Instagram: Click here.

Why do we give life? The power of clicks:

Related Posts

Post a Comment

No comments

Categories

Popular Post

Random Posts

Recent Posts

Popular Posts