Estilización de Botones en CSS: Clases y Hover Interactivo

Curso de Storybook: Sistemas de Diseño con JavaScript

Contenido del curso

Visión general de los sistemas de diseño en desarrollo

Desarrollo de componentes

Historias en Storybook

Essential Addons en Storybook

Pruebas de componentes en Storybook

Próximos pasos

21
Qué sigue después de Storybook
01:17 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:17

Estilización de Botones en CSS: Clases y Hover Interactivo

Curso de Storybook: Sistemas de Diseño con JavaScript

Clase 7 de 21

Clase 7 / 21

Recursos

¿Cómo estilizar un botón incluyendo variantes y efectos hover?

Estilizar nuestros componentes es una tarea esencial para cualquier desarrollador frontend que busca mejorar la interfaz de usuario, y el botón es uno de los elementos más utilizados en el diseño web. Ahora, vamos a ver cómo crear estilos globales, aplicar variantes y añadir un efecto hover atractivo para enriquecer la experiencia del usuario.

¿Cuáles son los estilos básicos de un botón?

Para definir los estilos básicos de un botón, comenzamos aplicando estilos que serán comunes y globales para todas las variantes del botón:

Borde (Border Radius): Aplicamos un radio de 12 píxeles para un efecto redondeado.
```
button {
    border-radius: 12px;
}
```
Color del texto: El color del texto será negro para asegurar una buena legibilidad en cualquier fondo.
Cursor: Cambiamos el cursor al pasar sobre el botón a pointer para indicar que es interactivo.

Efecto hover: Creamos una pseudo-clase hover que generará una sombra detrás del botón al pasar el mouse.

button:hover {
    box-shadow: 4px 4px 0px 0px black;
    transform: translate(4px, 4px);
    transition: transform 0.2s;
}

¿Cómo aplicar variantes con CSS y JavaScript?

Las variantes del diseño, como 'fill' y 'outline', requieren clases específicas que indicarán los estilos particulares para cada opción:

Variantes Fill y Outline: Definimos variantes agregando clases modificadoras.

.button--fill {
    background-color: var(--primary-300);
    color: white;
}

.button--outline {
    background: none;
    color: black;
}

JavaScript para manejo de clases: Añadimos las clases a los elementos mediante JavaScript para manejar variantes dinámicas.

const buttonStyles = `${size} ${style}`;
button.className = buttonStyles.join(' ');

¿Cómo definir y aplicar tamaños para botones?

Los botones deben adaptarse en tamaño según el diseño del componente, como small (pequeño), medium (mediano) o large (grande):

Clases de tamaño: Definimos clases basadas en los tamaños requeridos.

.button--small {
    padding: 8px 16px;
}

.button--medium {
    padding: 12px 24px;
}

.button--large {
    padding: 16px 32px;
}

¿Cómo asegurar una interacción suave?

Agregar un efecto de transición ayuda a suavizar la apariencia cuando el usuario interactúa con el botón:

Transiciones: Se establece una transición en la propiedad transform para suavizar el efecto hover.
```
button {
    transition: transform 0.2s;
}
```

Estas prácticas no solo aseguran que nuestros botones se vean bien, sino que también mejoran la accesibilidad y la percepción del usuario sobre la calidad del sitio. La implementación cuidadosa de estas características incrementa la efectividad de las interfaces de usuario, lo cual es crucial en el desarrollo web contemporáneo.

¡Sigue aprendiendo y mejorando tus habilidades de desarrollo frontend para crear experiencias de usuario aún mejores!

Resumen

¿Cómo estilizar un botón incluyendo variantes y efectos hover?

¿Cuáles son los estilos básicos de un botón?

Para definir los estilos básicos de un botón, comenzamos aplicando estilos que serán comunes y globales para todas las variantes del botón:

Borde (Border Radius): Aplicamos un radio de 12 píxeles para un efecto redondeado.
```
button {
    border-radius: 12px;
}
```
Color del texto: El color del texto será negro para asegurar una buena legibilidad en cualquier fondo.
Cursor: Cambiamos el cursor al pasar sobre el botón a pointer para indicar que es interactivo.

Efecto hover: Creamos una pseudo-clase hover que generará una sombra detrás del botón al pasar el mouse.

button:hover {
    box-shadow: 4px 4px 0px 0px black;
    transform: translate(4px, 4px);
    transition: transform 0.2s;
}

¿Cómo aplicar variantes con CSS y JavaScript?

Las variantes del diseño, como 'fill' y 'outline', requieren clases específicas que indicarán los estilos particulares para cada opción:

Variantes Fill y Outline: Definimos variantes agregando clases modificadoras.

.button--fill {
    background-color: var(--primary-300);
    color: white;
}

.button--outline {
    background: none;
    color: black;
}

JavaScript para manejo de clases: Añadimos las clases a los elementos mediante JavaScript para manejar variantes dinámicas.

const buttonStyles = `${size} ${style}`;
button.className = buttonStyles.join(' ');

¿Cómo definir y aplicar tamaños para botones?

Los botones deben adaptarse en tamaño según el diseño del componente, como small (pequeño), medium (mediano) o large (grande):

Clases de tamaño: Definimos clases basadas en los tamaños requeridos.

.button--small {
    padding: 8px 16px;
}

.button--medium {
    padding: 12px 24px;
}

.button--large {
    padding: 16px 32px;
}

¿Cómo asegurar una interacción suave?

Agregar un efecto de transición ayuda a suavizar la apariencia cuando el usuario interactúa con el botón:

Transiciones: Se establece una transición en la propiedad transform para suavizar el efecto hover.
```
button {
    transition: transform 0.2s;
}
```

¡Sigue aprendiendo y mejorando tus habilidades de desarrollo frontend para crear experiencias de usuario aún mejores!

Visión general de los sistemas de diseño en desarrollo

Qué es Storybook y para qué sirve

Creación de Sistemas de Diseño con Storybook

Desarrollo de componentes

Instalación de Storybook con Vanilla JavaScript

Arquitectura de componentes en Storybook con Atomic Design

Exportar design tokens de Figma a CSS

Crear un botón reutilizable con Storybook

Estilización de Botones en CSS: Clases y Hover Interactivo

Componente Card en JavaScript con BEM

Container Queries vs Media Queries en CSS

Estilización de Componentes CSS con Container Queries

Historias en Storybook

Cómo estructurar historias en Storybook

Controles de argTypes para botones en Storybook

Parámetros y decoradores en Storybook

Essential Addons en Storybook

Qué son los add-ons en Storybook

Actions y Backgrounds en Storybook

Viewports y outline en Storybook

Pruebas de componentes en Storybook

Cómo usar el test runner de Storybook

Pruebas de Interacción con Storybook y Testing Library

Pruebas de Accesibilidad en Storybook con Add-ons

Pruebas visuales de UI con Chromatic

Próximos pasos

Qué sigue después de Storybook

Estilización de Botones en CSS: Clases y Hover Interactivo

Progreso del curso

Visión general de los sistemas de diseño en desarrollo

Desarrollo de componentes

Historias en Storybook

Essential Addons en Storybook

Pruebas de componentes en Storybook

Próximos pasos

Recursos

Recursos