CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

Projects

Progress value is 30%

Buttons

The 📁 base/_buttons.scss file contains the basic button style, while the 📁 custom-style/_buttons.scss file is where you create your custom buttons.

To help you in the process of customizing your buttons, the framework includes some CSS custom properties to set font-size, padding, and border-radius:

:root {
  --btn-font-size: 1em;
  --btn-font-size-sm: calc(var(--btn-font-size) - 0.2em);
  --btn-font-size-md: calc(var(--btn-font-size) + 0.2em);
  --btn-font-size-lg: calc(var(--btn-font-size) + 0.4em);
  --btn-radius: 0.25em;
  --btn-padding-x: var(--space-sm);
  --btn-padding-y: var(--space-xs);
}

The .btn class includes the style applied to all the button components. The class modifiers can be used to create button variations.

Class Description
.btn basic style of all button components
.btn--primary main call-to-action button style
.btn--accent used to draw particular attention to the button (e.g., destructive actions)
.btn--subtle subtle style variation, used for secondary actions or in combo with primary/accent button.
.btn--disabled used for feedback, to identify a button that is disabled
.btn--sm button size small
.btn--md button size medium
.btn--lg button size large

Fork the pen below or use our Buttons Editor to create your custom buttons:

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us