⚡️ Download 385 HTML, CSS, JS Components and 9 templates for $129 - Limited time offer ⏳


Progress value is 30%


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

🔍 On this page:

  1. Button (.btn) component
  2. Fixed-size buttons
  3. Buttons visual editor
  4. Useful links

Button component #

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:

Fixed size buttons #

By default, the button size depends on the padding and font-size. To create fixed-sized button variations (e.g., a button with a height equal to 40px), you can create class modifiers (e.g., in the 'custom-style/_util.scss' file):

/* 👇 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:

Button Editor #

The Buttons Editor allows you to design and export a system of buttons in the browser. The generated code should be pasted into CodyFrame 'custom-style/_buttons.scss' file.

Project duplicated

Project created

Globals imported

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