Menu
Coddy logo textTech
EMPEZAR A APRENDER
flag Es iconEspañoldown icon

Efecto hover en botones

Parte de la sección CSS Mastery del Journey de HTML de Coddy — lección 41 de 43.

challenge icon

Desafío

Fácil

Ya hay un botón en el HTML. Tu objetivo es hacer que aumente ligeramente de tamaño cuando el usuario pase el cursor sobre él. En el CSS, aplica estilos a .cta-button para que:

  • Tenga una transición suave transition: transform 0.3s ease;.
  • Al pasar el cursor, aumente ligeramente de tamaño usando transform: scale(1.05).

Pruébalo tú mismo

<html>
<head>
  <title>Button Hover Effect</title>
  <style> 
    
    /* Add your styles here */
      .cta-button {
      background-color: #6a1b9a;
      color: white;
      padding: 12px 24px;
      border: none;
      border-radius: 8px;
      font-size: 1rem;
    }

  </style>
</head>
<body>
    <button class="cta-button">Click Me</button>
</body>
</html>

Todas las lecciones de CSS Mastery

1Dominio de selectores – Combinación

IntroducciónSelector de descendienteSelector de hijoSelector de hermano adyacenteSelector de hermano generalDesafío de repaso

4Proyecto de menú desplegable

Añadir el submenúMostrar el submenúMás estilosInput y botón

7Construye con CSS Grid

Conceptos básicos de GridPosicionamiento de elementos en Grid-rowÁreas con nombreDesafío de repaso

2Pseudoclases interactivas

PseudoclasesEfectos de hoverEfectos de focusEstilos de estado activoDesafío de repaso

5Efectos visuales

DegradadosFiltros CSSTransformacionesTransiciones y efectos hoverDesafío de repaso

8Sitio web de Flavor Fiesta

Configuración del gridEncabezadoLa parte principalPie de página

3Pseudoclases estructurales

Pseudoclases estructuralesSeleccionando el primer hijoSeleccionando el último hijoEl poder de los patrones: Usando nth-childDesafío de repaso

6Landing Page

Dar estilo a la sección del encabezadoDar estilo al botónDiseño de la secciónDiseño de tarjetasAñadir los toques finales

9Desafíos finales

Resaltar menú activoFilas de tabla tipo cebraEfecto hover en botonesDiseño de tarjetas en GridImagen Hero desenfocada