Botones

Átomos

Nombre

Se refiere al nombre que se le dará en el css y a la clase con que identificaremos cada átomo (componente). En este caso contaremos con tres tipos de botones, sus nombres serán:

.a-btn .-btnPrimary

.a-btn .-btnSecondary

.a-btn .-btnAlert

.a-btn .-btnMonlogo

El botón de la firma de Monlogo es igual al botón .-btnSecondary con la diferencia de que puede variar en su separación y el tamaño de la caja.

Descripción

💡

Para ver cuánto miden cada breakpoints ir a medidas de breakpoints

Desktop (breakpoints Xl y Lg)

.-btnPrimary

.-btnSecondary

.-btnAlert

Tablet y Teléfono (breakpoints Md, Sm, Xs, Xxs, X0)

.-btnPrimary

.-btnSecondary

.-btnAlert

Estados

Un átomo puede variar, de acuerdo al comportamiento o behavior que se defina para una situación específica. Los estados de un átomo indican como lucirá éste para cada situación. En este caso los estados que se manejarán serán:

→ Default

→ :hover

→ :active

💡

Se quiere imitar la manera en que reaccionan los botones en florencebymills.com

Icono de cierre del menu

Cómo te podemos ayudar