Card Toggle Switch - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Card Toggle Switch</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; font-family: Arial, sans-serif; } .toggle-switch { position: relative; width: 120px; height: 60px; background-color: #ddd; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); cursor: pointer; transition: background-color 0.3s ease-in-out; } .toggle-switch input { display: none; } .toggle-switch-label { position: absolute; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; } .toggle-switch .toggle-switch-handle { position: absolute; top: 3px; left: 3px; width: 54px; height: 54px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); transition: left 0.3s ease-in-out, transform 0.3s ease-in-out; } .toggle-switch input:checked + .toggle-switch-label .toggle-switch-handle { left: 63px; transform: rotate(360deg); } .toggle-switch input:checked + .toggle-switch-label { background-color: #4caf50; } </style> </head> <body> <div class="toggle-switch"> <input type="checkbox" id="toggle8" /> <label class="toggle-switch-label" for="toggle8"> <span class="toggle-switch-handle"></span> </label> </div> </body> </html>