Puedes usar el pseudoselector :hover de CSS para cambiar el estilo de un elemento cuando pasas el mouse por encima. Aquí te dejo un ejemplo simple:
```css
.button {
background-color: blue;
color: white;
padding: 10px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50px;
transition: background-color 0.3s;
}
.button:hover {
background-color: red;
}
```
En este ejemplo, cuando colocas el mouse sobre un elemento con la clase `.button`, el color de fondo cambiará de azul a rojo.
Este ejemplo también incluye una transición para suavizar el cambio de color.
Nota: Asegúrate de siempre incluir una declaración de transición en el estado del estilo original (en este caso, .button), no en el estado :hover. Esto asegura que la transición se aplica correctamente cuando se pasa el mouse sobre el elemento y también cuando se retira.
