JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div class="question-container">
  <p>Do you like programming?</p>
  <div class="button-container">
    <button id="yesBtn" onclick="handleYesClick()">Yes</button>
<button id="noBtn" onmouseover="handleNoMouseOver()">No</button>
  </div>
</div>

CSS

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
}

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

.button-container {
  margin-top: 20px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

button:hover {
  background-color: #f0f0f0;
}

JavaScript

function handleYesClick() {
  const noBtn = document.getElementById("noBtn");

  // Reset the position on "Yes" button click
  noBtn.style.transform = "translateX(0)";
  noBtn.disabled = false;
}

function handleNoMouseOver() {
  const noBtn = document.getElementById("noBtn");

  // Remove the previous transform to reset the transition
  noBtn.style.transition = 'none';
  noBtn.style.transform = "translateX(0)";
  noBtn.style.transform = "translateY(0)";

  // Triggering a reflow to ensure the removal of the previous transition takes effect
  void noBtn.offsetWidth;

  // Add the transition back and generate a random position between -100% and -50%
  noBtn.style.transition = 'transform 0.3s ease';
  const randomPosition = Math.random() * 50 + 100;
  noBtn.style.transform = `translateX(${randomPosition}%)`;
  noBtn.style.transform = `translateY(${randomPosition}%)`;
}