WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Botón de descarga animado
2293
btn7
Abrir en el editor
Publica tu código
Recomendado
10 May 2025
Un código de Mete
16 April 2025
Un código de hamzanramzan034
20 October 2023
Truco de Captura de Ratón en JS
HTML
Copy
Download
Open
CSS
Copy
.container { padding: 0; margin: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; display: flex; justify-content: center; align-items: center; } .label { background-color: transparent; border: 2px solid rgb(91, 91, 240); display: flex; align-items: center; border-radius: 50px; width: 150px; cursor: pointer; transition: all 0.4s ease; padding: 5px; position: relative; } .label::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #fff; width: 8px; height: 8px; transition: all 0.4s ease; border-radius: 100%; margin: auto; opacity: 0; visibility: hidden; } .label .input { display: none; } .label .title { font-size: 17px; color: #fff; transition: all 0.4s ease; position: absolute; right: 15px; bottom: 14px; text-align: center; } .label .title:last-child { opacity: 0; visibility: hidden; } .label .circle { height: 45px; width: 45px; border-radius: 50%; background-color: rgb(91, 91, 240); display: flex; justify-content: center; align-items: center; transition: all 0.4s ease; position: relative; box-shadow: 0 0 0 0 rgb(255, 255, 255); overflow: hidden; } .label .circle .icon { color: #fff; width: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.4s ease; } .label .circle .square { aspect-ratio: 1; width: 15px; border-radius: 2px; background-color: #fff; opacity: 0; visibility: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.4s ease; } .label .circle::before { content: ""; position: absolute; left: 0; top: 0; background-color: #3333a8; width: 100%; height: 0; transition: all 0.4s ease; } .label:has(.input:checked) { width: 57px; animation: installed 0.4s ease 3.5s forwards; } .label:has(.input:checked)::before { animation: rotate 3s ease-in-out 0.4s forwards; } .label .input:checked + .circle { animation: pulse 1s forwards, circleDelete 0.2s ease 3.5s forwards; rotate: 180deg; } .label .input:checked + .circle::before { animation: installing 3s ease-in-out forwards; } .label .input:checked + .circle .icon { opacity: 0; visibility: hidden; } .label .input:checked ~ .circle .square { opacity: 1; visibility: visible; } .label .input:checked ~ .title { opacity: 0; visibility: hidden; } .label .input:checked ~ .title:last-child { animation: showInstalledMessage 0.4s ease 3.5s forwards; } @keyframes pulse { 0% { scale: 0.95; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); } 70% { scale: 1; box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } 100% { scale: 0.95; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @keyframes installing { from { height: 0; } to { height: 100%; } } @keyframes rotate { 0% { transform: rotate(-90deg) translate(27px) rotate(0); opacity: 1; visibility: visible; } 99% { transform: rotate(270deg) translate(27px) rotate(270deg); opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } @keyframes installed { 100% { width: 150px; border-color: rgb(35, 174, 35); } } @keyframes circleDelete { 100% { opacity: 0; visibility: hidden; } } @keyframes showInstalledMessage { 100% { opacity: 1; visibility: visible; right: 56px; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */