🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →


Progress value is 30%


Edit the 📁 custom-style/_buttons.scss file to create your custom buttons.

To help you customize your buttons, CodyFrame includes the following CSS custom properties:

: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