Botón de desplazamiento de neón

2558 Andev.web

Abrir en el editor Publica tu código

Recomendado

3 March 2025

Página de destino de alquiler de coches

21 October 2024

Botón de luciérnaga

HTML

CSS

@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))
  }

Botón de desplazamiento de neón

Recomendado

Interruptor de encendido

Página de destino de alquiler de coches

Botón de luciérnaga

HTML

CSS

JS

Recomendado

Interruptor de encendido

Página de destino de alquiler de coches

Botón de luciérnaga

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS