WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Botón de desplazamiento de neón
2976
Andev.web
Abrir en el editor
Publica tu código
Recomendado
19 May 2025
tarjeta de caja flexible
10 May 2025
Un código de Mete
10 August 2024
Piezas de rompecabezas
HTML
Copy
WebLeb.com
WebLeb.com
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); * { font-family: 'Poppins', sans-serif; } body { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; background-color: #212121; } .container { display: flex; align-items: center; justify-content: center; height: 100vh; } .button { margin: 0; height: auto; background: transparent; padding: 0; border: none; cursor: pointer; } .button { --border-right: 6px; --text-stroke-color: rgba(255,255,255,0.6); --animation-color: #03959e; --fs-size: 2em; letter-spacing: 3px; text-decoration: none; font-size: var(--fs-size); font-family: "Arial"; position: relative; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px var(--text-stroke-color); } .hover-text { position: absolute; box-sizing: border-box; content: attr(data-text); color: var(--animation-color); width: 0%; inset: 0; border-right: var(--border-right) solid var(--animation-color); overflow: hidden; transition: 0.5s; -webkit-text-stroke: 1px var(--animation-color); } .button:hover .hover-text { width: 100%; filter: drop-shadow(0 0 23px var(--animation-color)) }
JS
Copy