Efectos de hover

Parte de la sección Dominio de CSS del Journey de HTML de Coddy. Lección 8 de 43.

La pseudoclase :hover te permite cambiar el estilo de un elemento cuando el usuario pasa el ratón sobre él.

Aquí tienes un ejemplo sencillo que cambia el color del texto al pasar el ratón sobre un botón:

button {
  color: black;
}

button:hover {
  color: red;
}

En este ejemplo, el texto del botón es negro por defecto, pero cuando pasas el ratón sobre él, el texto se vuelve rojo.

Desafío

Fácil

Tienes un botón cuyo estilo debe cambiar al pasar el cursor sobre él. Tu tarea consiste en:

Usar la pseudoclase :hover para cambiar el color de fondo del botón a verde cuando el usuario pase el cursor sobre él.
Aplicar una sombra de caja al botón durante el efecto de desplazamiento para que parezca que está elevado. Usa box-shadow de esta manera:

box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);

Añade una sombra con un desplazamiento, desenfoque y color.

Pruébalo tú mismo

<html>
<head>
    <title>Hover Effects</title>
    <style>
        .hover-button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
        }
        /* CSS solution goes here */
        
    </style>
</head>
<body>
    <button class="hover-button">Hover over me!</button>
</body>
</html>