Buttons and links are used across nearly every page of a website. Therefore, it’s important to set default styles for them. This is easy to do in the ACSS dashboard. Just navigate to the “Buttons & Links” tab.
Default Button Styling
Default button styles apply to ALL buttons, regardless of color.
Sharing styles across button types ensures that all your buttons will be visually consistent concerning these default characteristics.
Main Button Styling
- Custom Button Text Size: Turn this on and then set a min/max value if you want the default button text to be something other than the “M” text size.
- Button Padding: Set the top/bottom padding (Y) and left/right padding (X) for buttons. “Em” is the preferred unit here as it will cause the padding to scale up or down according to your button text size.
- Minimum Button Width: Sets a minimum width for all buttons. While buttons can still get wider according to their text, they’ll never be narrower than this value. Do not set this value too high; it can cause horizontal scroll/overflow issues on mobile devices.
Button Text Styling
- Line Height: Changes the line height of text on buttons. “1” is the widely accepted standard.
- Letter Spacing: Changes the letter spacing of button text.
- Font Weight: Changes the font-weight of all button text.
- Font Style: Changes the font style of all button text.
- Text Transform: Changes the transform value of all button text.
- Text Decoration: Changes the text decoration of all button text.
- Text Decoration on Hover: Changes the text decoration of all button text on hover.
Button Border Styling
- Button Border Width: Set the border width of your buttons. You won’t see the border if your border color is the same color as your button.
- Outline Button Border Width: Set the border width of your outline buttons (.btn–outline). Ideally, this value will match your other button border size value. This ensures all buttons are the same height when placed side by side.
- Button Radius: Set the border radius for all buttons.
Radius Note: Using .rounded classes or radius variables on your buttons are not advisable because this reduces global control. It’s best to set your button radius here in the ACSS dashboard so that all your buttons inherit this default radius and no additional classes or variables are necessary.
Button Transition
You can also set the Transition Duration of button transitions, which is the speed at which the button color changes from it the non-hover color to the hover-color.
Default Link Styling
Aside from default button styling, setting default link styling for your site is important.
This panel controls the default styling of all* text links across your site.
Options are:
- Link Color
- Link Color on Hover
- Link Weight
- Link Decoration
- Link Decoration on Hover
- Link Underline Offset – The space between the underline and your text.
Note: Link color and styling can still be changed granularly using .link--{color} classes.
Link Style Exclusions
Since default link styling is broad, you often want to exclude areas from receiving the default link styles. Headers and footers are common areas where you may not want default styles influencing your links.
If you need to exclude certain areas of your site from receiving default link styling, turn on the “Add Link Default Exclusions” feature in the dashboard.
When this feature is on, a textarea will appear, allowing you to define rules for the exclusion.
An example would be header a, which will exclude all links in your header. You can also do footer a to exclude all links in your footer.
This input accepts multiple rules as long as you separate them by comma.
Note: Wrap the entire statement in quotes to ensure that everything is parsed properly and applied to the :not correctly.
Available Buttons
Button styles are automatically available for all colors in ACSS. This gives you 14 default button styles (seven solid and seven outline buttons).
- Action
- Primary
- Secondary
- Accent
- Base
- Black
- White
It should be noted that button styling will not load for colors that are turned off in the Palette area. You can also deactivate any button group you don’t intend to use, even if you use that color group for other things. This will reduce the size of the framework.
The Action Button
The “Action” button is designed to be the default button in use across your website and is the default button style used in all Frames. The Action and Black and White buttons will fill the need for “buttons” across 98% of projects.
If this is the case for you, it’s best to turn off the remaining buttons: Primary, Secondary, Accent, and Base.
Overriding the Style of Certain Buttons
Each button group has its own customization area in the ACSS dashboard. Here’s an example of the Action button overrides panel:
This panel allows you to adjust the following for solid buttons:
- Background color
- Background color on hover
- Focus color
- Text color
- Text color on hover
- Border color
- Border color on hover
And the following for outline buttons:
- Background color on hover
- Border color on hover
- Text color
- Text color on hover
Overriding Buttons in Specific Contexts
ACSS buttons use locally scoped variables (tokens), so they’re easy to override. You can override an individual button on a page, buttons in a specific section, or buttons across an entire page without affecting other buttons of the same type.
To override a button or group of buttons, use some sort of selector to identify them and then redefine the value of its tokens.
For example, let’s say you wanted to override the padding, font weight, background color, and hover background color of a single action button on a single page of your site. Just override the variables you want to override at the ID level:
#btn123 {
--btn-padding-block: 2em;
--btn-padding-inline: 4em;
--btn-font-weight: 900;
--btn-background: var(--action-dark);
--btn-background-hover: var(--action-ultra-dark);
}
Code language: CSS (css)Want to make this change across an entire page? You can add a body class (a class on the body element) to the page to affect all action buttons:
body.custom .btn--action {
--btn-padding-block: 2em;
--btn-padding-inline: 4em;
--btn-font-weight: 900;
--btn-background: var(--action-dark);
--btn-background-hover: var(--action-ultra-dark);
}
Code language: CSS (css)Now you’ve changed the style of all buttons on a page without affecting any other page of the site.
Available Button Variables
Please reference our button variables documentation for a full list of available button variables.
Creating Custom Buttons
ACSS is designed to cover the basics regarding buttons, which will work for most websites. Create a custom button class if your design requires a super fancy button. Using the same naming convention of .btn-- is advisable.
For example, you could create a class .btn--default, assign custom styling to it, and use it wherever you want that button styling.
Use variables where appropriate if your custom button needs to share any default styling with your other buttons.