0

No se que pasa, ya revise que todo estuviera bien, he intentado cambiar los nombres de animación, tamaño de pixeles eh incluso comportamiento en el @Keyframes, pero aun nada.

Me gustaria pensar que definí mal el nomber o que cometí algún error a la hora de poner el before

agradezco cualquier ayuda, comentario y consejo. Adjunto mi código:

button{
  background: black;
  cursor: pointer;
  border: none;
  padding: 8px 20px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  border-radius: 12px;
  margin: 10px 150px;
  text-align: center;
}

button::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    red, blue, deeppink,blue,
    red, blue, deeppink, blue
  );
  background-size: 800%;
  border-radius: 10px;
  filter: blur(8px);
  animation: glowing 20s linear infinite;
}

@keyframes glowing {
  0%{
    background-position: 0 0; 
  }
  50%{
    background-position: 400% 0;
  }
}
<article>
  <button>Call me</button>
</article>

2
  • Buen día, ¿Cuál es el inconveniente?, yo veo que si funciona tu animación... el 2 feb. 2023 a las 23:19
  • 1
    A mi si me funciona la aminación incluso antes de haber sido editado, entiendo que lo tienes en un archivo style.css porque tu html hace referencia a él. Lo único que podría estar fallando es que tenga mal el nombre el archivo css o que este en otra carpera y no a la par del html. el 2 feb. 2023 a las 23:34

1 respuesta 1

0

Creo que editaron tu código, ¿pero realmente tenías la parte de CSS dentro del mismo archivo? Si es así, tienes que colocar el código CSS dentro de las etiquetas o dentro del archivo style.css que referencias en el código HTML

CSS Inline

Definir directamente las propiedades de estilo sobre la etiqueta *(no recomendable, a menos que emplees alguna librería o componente que te permita gestionar la especificad de esto, o sepas muy bien lo que haces)

CSS Interno

Definir uno o varios estilos agrupados dentro de etiquetas <style></style>. De esa manera, en un mismo archivo tienes presentación y estructura.

CSS Externo

Traslada las definiciones de estilo a un archivo por fuera del marcado de etiquetas, tal cual tienes en tu ejemplo, con <link href="style.css" rel="stylesheet" type="text/css">. Para ese caso, el navegador buscará en el archivo style.css en la misma carpeta los estilos correspondientes.

Código funcional

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet" type="text/css">
    <style>
        button{
        background: black;
        cursor: pointer;
        border: none;
        padding: 8px 20px;
        color: white;
        font-size: 16px;
        font-weight: bold;
        position: relative;
        border-radius: 12px;
        margin: 10px 150px;
        text-align: center;
    }


    button::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        background: linear-gradient(
        45deg,
         red, blue, deeppink,blue,
          red, blue, deeppink, blue
        );
        background-size: 800%;
        border-radius: 10px;
        filter: blur(8px);
        animation: glowing 20s linear infinite;
    }


    @keyframes glowing {
        0%{
            background-position: 0 0; 
        }
        50%{
            background-position: 400% 0;
        }
    }
</style>
</head>
<body>
    <article>
        <button>Call me</button>    
    </article>

2
  • Mmm... pareciese que pegó mal el código en la pregunta, yo solo lo acomodé en un snippet para que el código sea reproducible... el 2 feb. 2023 a las 23:21
  • El espíritu de la edición es excelente, creo que se corrige accidentalmente el bug al separar el HTML del CSS en el snippet. Es mi interpretación de la pregunta original. el 2 feb. 2023 a las 23:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.