0

Quiero hacer que un botón en una página vaya cambiando constantemente el color de fondo para hacer un poco más divertida la página web. Es para un proyecto de wordle.

#guess-button {
   display: block;
   margin: 0 auto;
   padding: 10px 20px;
   font-size: 18px;
   background-color: #0CBABA;
   color: #fff;
   border: none;
   border-radius: 3px;
 }
4
  • Podes dar mas detalles de lo que buscas? cambiar constantemente como? todo el tiempo que oscile entre varios colores? no podemos meternos en tu mente, proporciona mas detalles :) en todo caso en lo que es diseño de interfaces que un boton cambie de color todo el tiempo no es muy atractivo, el color va a depender de la importancia/funcion que tenga ese boton, y la paleta de colores de tu web. Commented el 27 jun. a las 23:54
  • ohhh ok muchas gracias Commented el 27 jun. a las 23:56
  • 1
    Por favor, lee Cómo preguntar y haz el recorrido de bienvenida para conocer el funcionamiento del sitio. Muestra un ejemplo mínimo verificable de lo que has intentado hasta el momento.
    – padaleiana
    Commented el 28 jun. a las 0:34
  • 1
    Y por cierto, sugiere a tus compañeros del bootcamp que hagan lo mismo (leer cómo funciona Stack Overflow en español), ya que todos están haciendo preguntas relacionadas al miniproyecto de wordle :)
    – padaleiana
    Commented el 28 jun. a las 0:35

1 respuesta 1

1

Puedes valerte de la opción de animaciones de CSS3, que se configura con la propiedad animation y sus sub-propiedades en combinación con la regla @keyframes que controla los pasos de una animación.

Por ejemplo, puedes hacer una transición entre dos colores con keyframes from/to y hacer que se repita infinitamente con la sub-propiedad animation-iteration-count

Por ejemplo:

button {
  background-color: red;
  animation-name: ejemplo;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes ejemplo {
  from {background-color: red;}
  to {background-color: yellow;}
}
<button>Botón de ejemplo</button>

También puedes hacer que cicle entre varios colores con keyframes que se van aplicando cuando ha transcurrido una fracción del tiempo de la animación, así:

button {
  background-color: red;
  animation: 3s multicolor;
  animation-iteration-count: infinite;
}

@keyframes multicolor {
    0% {background-color: #000;}
    33% {background-color: #FF0000;}
    66% {background-color: #0000FF;}
    100% {background-color: #FFF;}
}
<button>Botón de ejemplo</button>

2
  • muchas graciass Commented el 28 jun. a las 22:44
  • Si esta respuesta realmente te ha sido útil @DiegoBlaich, no olvides aceptarla. Haz el recorrido de bienvenida para conocer el funcionamiento del sitio.
    – padaleiana
    Commented el 29 jun. a las 11:29

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.