This responsive code supports 1 to 6 column lists for use on any page. It pulls the default colors from the main colors of the website.
The default class name is .dak-buttons. This can be built upon with a variety of classes to pull in different layout, color, and text styles. For example, .dak-buttons can be added to any ul or ol to create a simple vertical stack of buttons that take up a full page width.
You can see a full list of all the classes by going to: https://www.YOURDOMAIN.com/site-style-guide.php
If you want to display a single button, then you may want to use the alternative class name .dak-button and attach it to an a tag. Most of the styles available for .dak-buttons are also available for .dak-button. Other classnames can be added on as needed, but just like .dak-buttons, .dak-button must be present for the other styles to work properly.
You can display multiple buttons in a singe row, up to a total of 6, by appending the -# to the .dak-buttons class:
By default, the length of a button will be percentage based. So, if you have 4 buttons, each button will take up 24% of the page-length.
There are two other button size options: Set-Width and Auto-Width. These arguments can be utilized by both .dak-button and .dak-buttons
The Set-Width options have some default pixel sizes, which can be modified if desired. The following is the default sizes for the set-width option:
- .dak-buttons-width-xs, .dak-button-width-xs: 180px
- .dak-buttons-width-sm, .dak-button-width-sm: 240px
- .dak-buttons-width-md, .dak-button-width-md: 300px
- .dak-buttons-width-lg, .dak-button-width-lg: 360px
- .dak-buttons-width-xl, .dak-button-width-xl: 420px
Auto-Width buttons will resize themselves to fit the text displayed. If the text vary in length, then so will the buttons.
A buttons font will always default to your site's standard class family used for the majority of the text, but you can use .dak-buttons-accent or .dak-button-accent to force the button to utilize your header font instead.
You can also alter the font size of a button. Similar to .dak-buttons-width, this argument can be appended to both .dak-buttons and .dak-button. Please note that the padding on these buttons increases proportionally with the font size. The default sizes are as followed:
- .dak-buttons-font-sm, dak-button-font-sm: 0.875rem
- .dak-buttons-font-md, dak-button-font-md: 1rem
- .dak-buttons-font-lg, dak-button-font-lg: 1.25rem
- .dak-buttons-font-xl, dak-button-font-xl: 1.5rem
You can control a button's formatting in other ways, such as forcing Uppercase or Bolding. These can be accessed by both .dak-buttons and .dak-button.
- .dak-buttons-uppercase, dak-button-uppercase
- .dak-buttons-bold, dak-button-bold
Buttons can be aligned to the left, center, or right. This style can be accessed both by .dak-buttons and .dak-button.
- .dak-buttons-start, dak-button-start: Buttons will align left
- .dak-buttons-center, dak-button-center: Buttons will align center
- .dak-buttons-end, dak-button-end: Buttons will align right
.dak-buttons also has access to vertical stacking. These buttons can be stacked on top of on another even if they are not the full width of the available space.
Buttons also have access to a number of classes that will further style the button itself!
You can give both .dak-buttons and .dak-button rounded edges of various softness.
- .dak-buttons-rounded-xs, dak-button-rounded-xs: 3px
- .dak-buttons-rounded-sm, dak-button-rounded-sm: 5px
- .dak-buttons-pill, dak-button-pill: Fully rounded corners
If your page has dark backgrounds, you may want to utilize Light Buttons:
- .dak-buttons-light, dak-button-light: Buttons will pull with a light background and dark text
- .dak-buttons-outline-light, dak-button-outline-light: Buttons will pull in with a light border, light text, and a transparent background
- .dak-buttons-clear-light, dak-button-clear-light: Buttons will pull in with transparent background and light text
Buttons can be forced to have the same height when aligned horizontally in a row. A span must be added directly inside the a tag, and wrap around all internal content.
Images can be added to buttons without an extra class.
Finally, Buttons that trigger dropdowns can be shown with dropdown arrows when the active state adds class .is-active. This style can be accessed both by dak-buttons and dak-button.
- .dak-buttons-dropdown, dak-button-dropdown: