joplin-notes/joplin notion extension/Web Development/CSS/Snippets/confirmation feature on button without js.md

confirmation feature on button without js

<form action="/register" method="POST">
  <!-- Registration Fields -->
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>

  <!-- The CSS Hack Trigger -->
  <div class="submit-wrapper">
    <input type="checkbox" id="unlock-submit" class="toggle-gate">
    <label for="unlock-submit" class="cover-button">Register</label>
    <button type="submit" class="real-button">Confirm Registration</button> 
  </div>
</form>

<style>
  .submit-wrapper {
    position: relative;
    display: inline-block;
  }
  /* Hide the actual checkbox */
  .toggle-gate {
    display: none;
  }
  /* The fake button that sits on top */
  .cover-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #007bff;
    color: white;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
    z-index: 2;
  }
  /* The real submit button hidden underneath */
  .real-button {
    padding: 8px 16px;
    background: #28a745;
    color: white;
    border: none;
    cursor: pointer;
  }
  /* When the fake button is clicked, it checks the box and hides itself */
  .toggle-gate:checked ~ .cover-button {
    display: none;
  }
</style>

tailwind

<form action="/register" method="POST" class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md space-y-4">
  <!-- Registration Fields -->
  <div>
    <label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
    <input type="text" id="username" name="username" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
  </div>

  <div>
    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
    <input type="password" id="password" name="password" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
  </div>

  <!-- The CSS Hack Trigger Container -->
  <div class="relative inline-block w-full pt-2">
    <!-- Hidden Checkbox using Tailwind's peer utility -->
    <input type="checkbox" id="unlock-submit" class="peer hidden">
    
    <!-- First Click: The Fake Button Label -->
    <label for="unlock-submit" class="absolute inset-x-0 bottom-0 top-2 flex items-center justify-center bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md cursor-pointer z-10 transition-colors peer-checked:hidden">
      Register
    </label>
    
    <!-- Second Click: The Real Submit Button -->
    <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-md transition-colors">
      Confirm Registration
    </button>
  </div>
</form>