Buttons

Click and wait

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Loading Button</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <button id="loadingButton" class="btn">
      <span class="button-text">Submit</span>
      <span class="loader"></span>
    </button>

    <script>
      const button = document.getElementById("loadingButton");
      button.addEventListener("click", function () {
        this.classList.add("loading");
        this.disabled = true;

        // Simulate a loading process
        setTimeout(() => {
          this.classList.remove("loading");
          this.disabled = false;
        }, 3000); // 3 seconds loading time
      });
    </script>
  </body>
</html>

CSS

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

.btn {
  position: relative;
  padding: 10px 20px;
  background-color: #2550b8;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  outline: none;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #7b96f4;
}

.btn:disabled {
  cursor: not-allowed;
}

.loader {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  border: 2px solid white;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.btn.loading .button-text {
  visibility: hidden;
}

.btn.loading .loader {
  display: block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

Spotlight button

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Shiny Button</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="button-container">
      <button id="shinyButton" class="shiny-button">
        Sign up free
        <span class="shine"></span>
      </button>
    </div>

    <script src="script.js"></script>
  </body>
</html>

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #1a1a2e;
}

.button-container {
  text-align: center;
}

.shiny-button {
  position: relative;
  padding: 12px 24px;
  background-color: #6200ea;
  color: white;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  outline: none;
}

.shiny-button .shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  opacity: 0;
}

.shiny-button:hover .shine {
  opacity: 1;
}

JS

const button = document.getElementById("shinyButton");
const shine = button.querySelector(".shine");

button.addEventListener("mouseenter", () => {
  shine.style.opacity = "1";
});

button.addEventListener("mousemove", (e) => {
  const rect = button.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  shine.style.left = `${x}px`;
  shine.style.top = `${y}px`;
});

button.addEventListener("mouseleave", () => {
  shine.style.opacity = "0";
});