🎉 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.

The .btn class includes the style applied to all the button components.

The following 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
.btn--icon button containing (only) an icon

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

If you want to create fixed-sized button variations (e.g., a button with a height equal to 40px), you can create class modifiers that set the desired size:

/* 👇 example: custom height utility classes */
.height-30, .height-40, .height-50 {
  height: var(--height);

  &.btn, &.form-control {
    line-height: var(--height);
    padding-top: 0;
    padding-bottom: 0;

.height-30 { --height: 30px; }
.height-40 { --height: 40px; }
.height-50 { --height: 50px; }

/* 👇 example: custom width utility classes */
.width-40, .width-120 {
  width: var(--width);

  &.btn {
    padding-left: 0;
    padding-right: 0;

.width-40  { --width: 40px; }
.width-120 { --width: 120px; }

Here's a live example:

✅ Project duplicated

✅ Project created

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