Buttons - v3
Edit the custom-style/_buttons.scss file to create your custom buttons.
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:
| CSS Class | Description |
|---|---|
b{p}tn |
basic style of all button components |
b{p}tn--primary |
main call-to-action button style |
b{p}tn--accent |
used to draw particular attention to the button (e.g., destructive actions) |
b{p}tn--subtle |
subtle style variation, used for secondary actions or in combo with primary/accent button. |
b{p}tn--disabled |
used for feedback, to identify a button that is disabled |
b{p}tn--sm |
button size small |
b{p}tn--md |
button size medium |
b{p}tn--lg |
button size large |
b{p}tn--icon |
button containing (only) an icon |
l{p}ink |
button with same style of link elements |
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:not(textarea) {
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.
