Buttons





Variable name Default value Description
--b-btn purple Background color for the button component.
--border-btn purple Border color for the button component.
--br-btn .3rem Border radius for the button component.
--c-btn #fff Text color for the button component.
--c-btn-s var(--b-btn, purple) Secondary text color for the button component, used in the .btn-s class.
--c-btn-t var(--b-btn, purple) Tertiary text color for the button component, used in the .btn-t class.
--fs-btn 1rem Font size for the button component.
--fw-btn 500 Font weight for the button component.
--p-btn .6rem 1.2rem Padding for the button component.
--g-btn .6rem Gap between elements inside the button component.


CSS Class Description
btn Base class for the button component. Sets up alignment, background, border, color, cursor, display, font-size, font-weight, gap, justify-content, outline, overflow, padding, position, text-decoration, transition, and user-select.
btn::before Before pseudo-element for the btn class. Defines background color, content, inset, opacity, position, and transition.
btn::after After pseudo-element for the btn class. Defines animation, border, border-left-color, border-radius, content, display, height, left, opacity, position, top, transition, width, and z-index.
btn:hover::before, btn.syncing::before Styles for the before pseudo-element when the btn class is hovered over or has the syncing class.
btn:active Style for the btn class when it is active. Applies transform.
btn:disabled Style for the btn class when it is disabled. Applies opacity and pointer-events.
btn.syncing Modifier class for the btn component when syncing. Adjusts pointer-events.
btn-s Secondary style for the button component. Adjusts background and color, mainly used for secondary button styling.
btn-t Tertiary style for the button component. Adjusts background, border-color, and color, mainly used for tertiary button styling.