Memexplanation: Adding a Playful Twist to Form Submission: The Rotating Button

Author

Muhammad Ahsan Ayaz
February 25, 2024

Memexplanation: Adding a Playful Twist to Form Submission: The Rotating Button

In this quick tutorial, we'll inject some fun into a standard web form. Imagine a submit button that, upon click, doesn't just blandly submit your form but instead takes a spin—literally. It's a simple trick, but it adds a memorable touch to the user's experience. Let's dive in.

Setup

You'll need:

  • A basic understanding of HTML, CSS, and JavaScript.

  • An environment to write and test web code (e.g., a text editor and a browser).

Step 1: HTML Structure

First, let's set up the form. Create an HTML file and paste the following code: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fun Button</title>
    <style>
      /* CSS goes here */
    </style>
  </head>
  <body>
    <div class="container">
      <form onsubmit="rotateButton(event)">
        <label for="name">Name</label>
        <input type="text" id="name" name="name" value="Ahsan" />

        <label for="email">Email</label>
        <input
          type="email"
          id="email"
          name="email"
          value="[email protected]"
        />

        <button id="funButton">
          <div class="loader" id="loader"></div>
          Submit
        </button>
      </form>
    </div>
    <script>
      // JavaScript goes here
    </script>
  </body>
</html>

Step 2: Styling with CSS

Within the <style> section of the HTML head, add: 

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

.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Additional CSS omitted for brevity */

This CSS centers the form on the page and styles the inputs and button.

Step 3: JavaScript Magic

Replace the JavaScript placeholder in the HTML file with: 

function rotateButton(ev) {
  ev.preventDefault();
  var btn = document.getElementById("funButton");
  // Apply infinite rotation animation to the button
  btn.style.transformOrigin = "79px 20px";
  btn.style.animation = "rotateButtonInfinitely 0.5s linear infinite";
}

This function gets called when the form is submitted, preventing the default action and instead applying a rotation to the button.

Final Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fun Button</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }

      .container {
        text-align: center;
      }

      form {
        display: flex;
        flex-direction: column;
        gap: 20px;
        background: #fff;
        padding: 40px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      input[type="text"],
      input[type="email"] {
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }

      #funButton {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        border: none;
        background-color: #007bff;
        color: white;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 10px; /* Add some space between the loader and the button text */
      }

      .loader {
        border: 2px solid #f3f3f3; /* Light grey */
        border-top: 2px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 12px;
        height: 12px;
        display: inline-block;
      }

      @keyframes rotateButtonInfinitely {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <form onsubmit="rotateButton(event)">
        <label for="name">Name</label>
        <input type="text" id="name" name="name" value="Ahsan" />

        <label for="email">Email</label>
        <input
          type="email"
          id="email"
          name="email"
          value="[email protected]"
        />

        <button id="funButton">
          <div class="loader" id="loader"></div>
          Submit
        </button>
      </form>
    </div>
    <script>
      function rotateButton(ev) {
        ev.preventDefault();
        var btn = document.getElementById("funButton");
        // Apply infinite rotation animation to the button
        btn.style.transformOrigin = "79px 20px";
        btn.style.animation = "rotateButtonInfinitely 0.5s linear infinite";
      }
    </script>
  </body>
</html>

Explanation

The humor and novelty come from subverting expectations. Instead of a loader spinning or the form simply submitting, the submit button itself takes a whimsical spin. It's a small touch but adds a unique interaction that can make the experience more enjoyable for the user.

Conclusion

That's it! With just a bit of HTML, CSS, and JavaScript, you've added a playful interaction to a web form. This example illustrates how even small tweaks can significantly enhance the user experience, making your projects more memorable.

Reply

or to participate.