Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprende Desafío: Estilizar Botones | Creación de Componentes Básicos
Tailwind CSS para Desarrollo Web

bookDesafío: Estilizar Botones

Tarea

Utilizando Tailwind CSS, crear un botón que cumpla con los siguientes requisitos:

  1. El botón debe tener un fondo azul (por ejemplo, bg-blue-500);
  2. Al pasar el cursor sobre el botón, el color de fondo debe cambiar a un tono más oscuro de azul (por ejemplo, bg-blue-700);
  3. Al recibir el foco, el botón debe tener un color de fondo amarillo (por ejemplo, bg-yellow-500);
  4. Al estar activo (presionado), el color de fondo debe cambiar a un tono aún más oscuro de azul (por ejemplo, bg-blue-900);
  5. Cuando esté deshabilitado, el botón debe mostrarse con un 50% de opacidad y un cursor que indique que no es clickeable.
index.html

index.html

copy
  • Utilizar hover:bg-blue-700 para el estado hover;
  • Utilizar focus:bg-yellow-500 para el estado focus;
  • Utilizar active:bg-blue-900 para el estado active;
  • Utilizar opacity-50 cursor-not-allowed para el estado disabled.
index.html

index.html

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 2

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you show me the complete HTML code for the button using Tailwind CSS?

How do I make the button disabled using Tailwind classes?

Can you explain how to combine these Tailwind classes for all the required states?

Awesome!

Completion rate improved to 3.57

bookDesafío: Estilizar Botones

Desliza para mostrar el menú

Tarea

Utilizando Tailwind CSS, crear un botón que cumpla con los siguientes requisitos:

  1. El botón debe tener un fondo azul (por ejemplo, bg-blue-500);
  2. Al pasar el cursor sobre el botón, el color de fondo debe cambiar a un tono más oscuro de azul (por ejemplo, bg-blue-700);
  3. Al recibir el foco, el botón debe tener un color de fondo amarillo (por ejemplo, bg-yellow-500);
  4. Al estar activo (presionado), el color de fondo debe cambiar a un tono aún más oscuro de azul (por ejemplo, bg-blue-900);
  5. Cuando esté deshabilitado, el botón debe mostrarse con un 50% de opacidad y un cursor que indique que no es clickeable.
index.html

index.html

copy
  • Utilizar hover:bg-blue-700 para el estado hover;
  • Utilizar focus:bg-yellow-500 para el estado focus;
  • Utilizar active:bg-blue-900 para el estado active;
  • Utilizar opacity-50 cursor-not-allowed para el estado disabled.
index.html

index.html

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 2
some-alt