---
id: 587d78a7367417b2b2512ae0
title: Use CSS Animation to Change the Hover State of a Button
challengeType: 0
videoUrl: ''
localeTitle: Usa la animación CSS para cambiar el estado de desplazamiento de un botón
---
## Description
Puede usar CSS @keyframes
para cambiar el color de un botón en su estado activo. Aquí hay un ejemplo de cómo cambiar el ancho de una imagen al mover el mouse: <estilo>
img: hover {
nombre de la animación: ancho;
animación-duración: 500ms;
}
ancho de @keyframes {
100% {
ancho: 40px;
}
}
</style>
<img src = "https://bit.ly/smallgooglelogo" alt = "Logo de Google" />
## Instructions
Tenga en cuenta que ms
representa milisegundos, donde 1000 ms es igual a 1 s. Use CSS @keyframes
para cambiar el background-color
de background-color
del elemento del button
para que se convierta en #4791d0
cuando un usuario se #4791d0
sobre él. La regla @keyframes
solo debe tener una entrada para el 100%
.
## Tests
```yml
tests:
- text: La regla @keyframes debe usar el animation-name
de color de fondo.
testString: 'assert(code.match(/@keyframes\s+?background-color\s*?{/g), "The @keyframes rule should use the animation-name
background-color.");'
- text: 'Debería haber una regla en @keyframes
que cambie el background-color
a #4791d0
al 100%.'
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), "There should be one rule under @keyframes
that changes the background-color
to #4791d0
at 100%.");'
```
## Challenge Seed
## Solution
```js
// solution required
```