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

bookCreación y Estilización de Botones

Los botones son elementos interactivos fundamentales en el diseño web. Tailwind CSS proporciona una variedad de utilidades para estilizar botones de manera efectiva y gestionar sus diferentes estados, como hover, focus y active.

Estilizado básico de botones

Para estilizar un botón básico, se pueden utilizar utilidades para el color de fondo, color de texto, relleno, radio de borde y peso de fuente.

index.html

index.html

copy

Explicación

  1. bg-yellow-500: Establece el color de fondo a un tono azul;
  2. text-white: Establece el color del texto en blanco;
  3. font-bold: Aplica negrita al texto;
  4. py-2: Agrega relleno vertical (0.5rem o 8px);
  5. px-4: Agrega relleno horizontal (1rem o 16px);
  6. rounded: Agrega esquinas ligeramente redondeadas.

Estado Hover

Para cambiar la apariencia de un botón cuando el usuario pasa el cursor sobre él, se puede utilizar el prefijo hover: con cualquier clase utilitaria.

index.html

index.html

copy

hover:bg-blue-700: Cambia el color de fondo a azul oscuro cuando el botón está en estado de desplazamiento (hover).

Estado de enfoque

Para estilizar un botón cuando está enfocado (por ejemplo, cuando se selecciona usando el teclado), se puede utilizar el prefijo focus: con cualquier clase utilitaria.

index.html

index.html

copy

En este ejemplo, cuando se pasa el cursor del ratón sobre un botón, este cambia a azul. Si se utiliza el botón Tab, el botón se volverá rojo.

Estados activo y deshabilitado

Los estados activo y deshabilitado se utilizan con menor frecuencia. Sin embargo, también debemos considerarlos.

Para aplicar estilos a un botón cuando está activo (por ejemplo, al hacer clic en él), se puede utilizar el prefijo active: con cualquier clase utilitaria.

Para aplicar estilos a un botón cuando está deshabilitado (por ejemplo, cuando no se puede interactuar con él), se puede utilizar el prefijo disabled: con cualquier clase utilitaria.

index.html

index.html

copy

Explicación

  1. active:bg-green-800: Cambia el color de fondo a un tono más oscuro de verde cuando el botón está activo (presionado);
  2. opacity-50: Reduce la opacidad del botón para que parezca deshabilitado;
  3. cursor-not-allowed: Cambia el cursor para indicar que el botón no es clickeable;
  4. Atributo disabled: Lo hace no interactivo.

Ejemplo de todos los estados

Combinación de todos los estados en un solo ejemplo

index.html

index.html

copy

Explicación

  1. bg-blue-500: Establece el color de fondo predeterminado;
  2. hover:bg-blue-700: Cambia el color de fondo al pasar el cursor;
  3. focus:outline-none: Elimina el contorno predeterminado al enfocar;
  4. focus:ring-2: Agrega un anillo de enfoque con un ancho de 2 píxeles;
  5. focus:ring-blue-600: Establece el color del anillo de enfoque;
  6. focus:ring-opacity-50: Establece la opacidad del anillo de enfoque;
  7. active:bg-blue-800: Cambia el color de fondo cuando el botón está activo;
  8. text-white: Establece el color del texto en blanco;
  9. font-bold: Aplica negrita al texto;
  10. py-2: Agrega relleno vertical;
  11. px-4: Agrega relleno horizontal;
  12. rounded: Agrega esquinas ligeramente redondeadas.

Nota

Si necesitas profundizar más en el Componente de Botón de Tailwind, aquí tienes un enlace a la documentación oficial.

1. ¿Cómo se cambia el color de fondo de un botón cuando se pasa el cursor sobre él?

2. ¿Qué clase utilitaria elimina el contorno de enfoque predeterminado de un botón?

3. ¿Qué clase utilitaria cambia el color de fondo de un botón cuando está activo (presionado)?

question mark

¿Cómo se cambia el color de fondo de un botón cuando se pasa el cursor sobre él?

Select the correct answer

question mark

¿Qué clase utilitaria elimina el contorno de enfoque predeterminado de un botón?

Select the correct answer

question mark

¿Qué clase utilitaria cambia el color de fondo de un botón cuando está activo (presionado)?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 1

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 explain how to combine multiple states for a button in Tailwind?

What are some best practices for accessible button design with Tailwind?

Can you show more examples of custom button styles using Tailwind?

Awesome!

Completion rate improved to 3.57

bookCreación y Estilización de Botones

Desliza para mostrar el menú

Los botones son elementos interactivos fundamentales en el diseño web. Tailwind CSS proporciona una variedad de utilidades para estilizar botones de manera efectiva y gestionar sus diferentes estados, como hover, focus y active.

Estilizado básico de botones

Para estilizar un botón básico, se pueden utilizar utilidades para el color de fondo, color de texto, relleno, radio de borde y peso de fuente.

index.html

index.html

copy

Explicación

  1. bg-yellow-500: Establece el color de fondo a un tono azul;
  2. text-white: Establece el color del texto en blanco;
  3. font-bold: Aplica negrita al texto;
  4. py-2: Agrega relleno vertical (0.5rem o 8px);
  5. px-4: Agrega relleno horizontal (1rem o 16px);
  6. rounded: Agrega esquinas ligeramente redondeadas.

Estado Hover

Para cambiar la apariencia de un botón cuando el usuario pasa el cursor sobre él, se puede utilizar el prefijo hover: con cualquier clase utilitaria.

index.html

index.html

copy

hover:bg-blue-700: Cambia el color de fondo a azul oscuro cuando el botón está en estado de desplazamiento (hover).

Estado de enfoque

Para estilizar un botón cuando está enfocado (por ejemplo, cuando se selecciona usando el teclado), se puede utilizar el prefijo focus: con cualquier clase utilitaria.

index.html

index.html

copy

En este ejemplo, cuando se pasa el cursor del ratón sobre un botón, este cambia a azul. Si se utiliza el botón Tab, el botón se volverá rojo.

Estados activo y deshabilitado

Los estados activo y deshabilitado se utilizan con menor frecuencia. Sin embargo, también debemos considerarlos.

Para aplicar estilos a un botón cuando está activo (por ejemplo, al hacer clic en él), se puede utilizar el prefijo active: con cualquier clase utilitaria.

Para aplicar estilos a un botón cuando está deshabilitado (por ejemplo, cuando no se puede interactuar con él), se puede utilizar el prefijo disabled: con cualquier clase utilitaria.

index.html

index.html

copy

Explicación

  1. active:bg-green-800: Cambia el color de fondo a un tono más oscuro de verde cuando el botón está activo (presionado);
  2. opacity-50: Reduce la opacidad del botón para que parezca deshabilitado;
  3. cursor-not-allowed: Cambia el cursor para indicar que el botón no es clickeable;
  4. Atributo disabled: Lo hace no interactivo.

Ejemplo de todos los estados

Combinación de todos los estados en un solo ejemplo

index.html

index.html

copy

Explicación

  1. bg-blue-500: Establece el color de fondo predeterminado;
  2. hover:bg-blue-700: Cambia el color de fondo al pasar el cursor;
  3. focus:outline-none: Elimina el contorno predeterminado al enfocar;
  4. focus:ring-2: Agrega un anillo de enfoque con un ancho de 2 píxeles;
  5. focus:ring-blue-600: Establece el color del anillo de enfoque;
  6. focus:ring-opacity-50: Establece la opacidad del anillo de enfoque;
  7. active:bg-blue-800: Cambia el color de fondo cuando el botón está activo;
  8. text-white: Establece el color del texto en blanco;
  9. font-bold: Aplica negrita al texto;
  10. py-2: Agrega relleno vertical;
  11. px-4: Agrega relleno horizontal;
  12. rounded: Agrega esquinas ligeramente redondeadas.

Nota

Si necesitas profundizar más en el Componente de Botón de Tailwind, aquí tienes un enlace a la documentación oficial.

1. ¿Cómo se cambia el color de fondo de un botón cuando se pasa el cursor sobre él?

2. ¿Qué clase utilitaria elimina el contorno de enfoque predeterminado de un botón?

3. ¿Qué clase utilitaria cambia el color de fondo de un botón cuando está activo (presionado)?

question mark

¿Cómo se cambia el color de fondo de un botón cuando se pasa el cursor sobre él?

Select the correct answer

question mark

¿Qué clase utilitaria elimina el contorno de enfoque predeterminado de un botón?

Select the correct answer

question mark

¿Qué clase utilitaria cambia el color de fondo de un botón cuando está activo (presionado)?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

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