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
2630
btn7
Abrir en el editor
Publica tu código
Recomendado
23 August 2025
Soluciones de redes informáticas | Ciberseguridad - NetMasters
5 January 2024
Página de Carga con Círculo Giratorio
25 May 2025
Clon de Pinterest
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) */