Buttons
Buttons play a big role in any user interface as they give users the ability to interact with the website, so we should use them carefully.
It is necessary to know the good and bad practices for a perfect button.
First, take a look at button cheat sheet.
A simple button
A button with FlatifyCSS style can be defined in several ways as mentioned in the button cheatsheet, for any type of element, you can use the .button class, the element will have button style with the active/focus-visible states if it supports.
<button class="button">Click Here</button>
Buttons priority
A great design system must give different priorities for buttons, each button should have its priority based on what it does.
Generally, there are primary, secondary, and tertiary buttons (link buttons .link-button), you can see them in the example below:
<button class="button style-accent">Primary</button>
<button class="button style-light">Secondary</button>
<button class="link-button">Link button</button>
Sizes
To change the button size use size setter classes.
These classes just set a font-size property so it is possible to change it yourself by writing custom CSS.
<button class="button size-xs">Click Here</button>
<button class="button size-md">Click Here</button>
<button class="button size-2x">Click Here</button>
<button class="button size-4x">Click Here</button>
Colors
There are helper classes for styling elements like button, first read about color setter classes for having button with diffrent background and text color.
<button class="button style-accent">Click Here</button>
<button class="button style-purple">Click Here</button>
<button class="button style-yellow">Click Here</button>
<button class="button style-accent-light">Click Here</button>
<button class="button style-purple-light">Click Here</button>
<button class="button style-yellow-light">Click Here</button>
<button class="button style-warning">Click Here</button>
<button class="button style-danger">Click Here</button>
<button class="button style-dark">Click Here</button>
<button class="button style-warning-light">Click Here</button>
<button class="button style-danger-light">Click Here</button>
<button class="button style-dark-light">Click Here</button>
Roundness
To change roundness there are roundness helper classes.
<button class="button style-accent edge-sharp">Click Here</button>
<button class="button style-purple edge-round-sm">Click Here</button>
<button class="button style-yellow edge-circle">Click Here</button>
Bordered
By default, FlatifyCSS buttons do not have borders however if you add bordered class to the button it will have borders.
<button class="button style-accent bordered">Click Here</button>
<button class="button style-purple bordered">Click Here</button>
<button class="button style-yellow bordered">Click Here</button>
<button class="button style-accent-light bordered">Click Here</button>
<button class="button style-purple-light bordered">Click Here</button>
<button class="button style-yellow-light bordered">Click Here</button>
<button class="button style-warning bordered">Click Here</button>
<button class="button style-danger bordered">Click Here</button>
<button class="button style-dark bordered">Click Here</button>
<button class="button style-warning-light bordered">Click Here</button>
<button class="button style-danger-light bordered">Click Here</button>
<button class="button style-dark-light bordered">Click Here</button>
Outline
Kind of a ninja, which gets less attention but is still influential.
<button class="button style-accent outline">Click Here</button>
<button class="button style-purple outline">Click Here</button>
<button class="button style-yellow outline">Click Here</button>
<button class="button style-accent-light outline">Click Here</button>
<button class="button style-purple-light outline">Click Here</button>
<button class="button style-yellow-light outline">Click Here</button>
<button class="button style-warning outline">Click Here</button>
<button class="button style-danger outline">Click Here</button>
<button class="button style-dark outline">Click Here</button>
<button class="button style-warning-light outline">Click Here</button>
<button class="button style-danger-light outline">Click Here</button>
<button class="button style-dark-light outline">Click Here</button>
States
To make a button disabled you can add the .disabled class or HTML disabled attribute, also to keep the button in pressed style use the .active class. There is a class called .static specially for buttons when you need to have the style of FlatifyCSS buttons but not styles for hover/focus.
<button class="button style-accent disabled">Disabled</button>
<button disabled class="button style-accent">Disabled</button>
<button class="button style-accent active">Active</button>
<button class="button style-accent static">Static</button>
Customization
Each button has these CSS variables for customization, they can be set as :root for all buttons default style or just for a specific selector.
--flatify__button-txt-color
--flatify__button-bg-color
--flatify__button-border-color
<button class="my-button-1 button size-lg">Custom button</button>
<button class="my-button-2 button size-lg">Custom button</button>
<button class="my-button-3 button outline size-lg">Custom button</button>
.my-button-1 {
--flatify__button-txt-color: white;
--flatify__button-bg-color: linear-gradient(15deg, #03001e, #7303c0, #ec38bc, #fdeff9);
--flatify__button-border-color: linear-gradient(25deg, #03001e, #7303c0, #ec38bc, #fdeff9);
}
.my-button-2 {
--flatify__button-txt-color: #fff;
--flatify__button-bg-color: #48cfad;
--flatify__button-border-color: #37bc9b;
}
.my-button-3 {
--flatify__button-txt-color: #d770ad;
--flatify__button-bg-color: #ec87c0;
--flatify__button-border-color: #d770ad;
}