Efectos de hover

Parte de la sección CSS Mastery 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.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Desafío

Fácil

Tienes un botón que necesita cambiar de estilo al pasar el cursor sobre él. Tu tarea es:

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

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

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

Hoja de referencia

La pseudo-clase :hover cambia el estilo de un elemento cuando el usuario pasa el ratón sobre él:

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.

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>

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.