Styling Links into Buttons
Want more examples and options: Check out the /site-style-guide.php available on every site!
See Dakno's Site Style Guide for an example.
Overview
You can turn links into buttons that match your main website color simply by adding some classes. Our button styles support single link buttons or lists of links that can be converted into 1 – 6 columns of buttons, are automatically responsive, and have specialized styles that can be added to any button.
Standalone (Single) Buttons
To create a single button that is center-aligned, add a class of dak-button to the a tag. By default, the size of this button is 240px wide.
NOTE: You can add any of the classes to this a tag that you might add to the dak-buttons ul tag... just remove the s in dak buttons!
<a href="#" class="dak-button">Find Your Dream Home</a>
<a href="#" class="dak-button dak-button-alt dak-button-bold">Find Your Dream Home</a>
List of Buttons (1 or more links)
Adding .dak-buttons to the ul or ol tag will convert all list items into buttons. Adding only this class to a list will give you a vertical stack of buttons that are full width.
Adding a Specific Number of Columns
You can display buttons in multiple columns per row, up to 6, by adding an additional class. Be sure the dak-buttons class is present and add one of the following, depending on how many columns you may need:
- .dak-buttons-2
- .dak-buttons-3
- .dak-buttons-4
- .dak-buttons-5
- .dak-buttons-6
The buttons are automatically responsive and will adjust the number of columns shown automatically depending on the screen size. For example 6 columns on smaller screen sizes may instead show at 3, 2, or 1 columns. These buttons will change width based on the size of the screen and container that they are in.
For example, the below code will give you 2 rows of buttons with 4 columns at the widest widths:
<ul class="dak-buttons dak-buttons-4">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
Set-width buttons
If you prefer buttons to be a set width and to flow when there is no more space to fit them (instead of at specific sizes), you can use the set-width button options. These can also be used with the standalone dak-button (just drop the s from buttons).
There are 5 size options:
- .dak-buttons-width-xs: 180px
- .dak-buttons-width-sm: 240px
- .dak-buttons-width-md: 300px
- .dak-buttons-width-lg: 360px
- .dak-buttons-width-xl: 420px
For example, the below code will give you buttons of 300px wide:
<ul class="dak-buttons dak-buttons-width-md">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
You can also use these classes on a stand-alone button to make it wider
<a href="#" class="dak-button dak-button-width-xl">Find Your Dream Home</a>
Adding Buttons with Variable Widths (list only)
If you prefer buttons to be sized depending on their content ("auto width") adding:
- .dak-buttons-width-auto
For example, the below code will give you buttons of auto/varying width based on their text content:
<ul class="dak-buttons dak-buttons-width-auto">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
Button Height
By default, the height of each button in a list is determined individually by the text inside the button. If you have button text that may overflow onto two lines, and you want all the buttons to be the same height, you can add:
- dak-buttons-height
Additionally, adding a span around the content inside each li will vertically align the content to the center. In the absence of a span, the content will be aligned to the top.
If you want the buttons to appear even (second example below) you must wrap all content inside the a tag inside of a <span></span> tag!
The code should look like this (as a simple example):
<a href="#"><span>Link 4</span></a>
Changing Button Styles
In addition to selecting your width, you can also change the appearance of your buttons. We have several styles that you can add that affect the font size, weight, family, as well as colors.
Add the style to the ul or ol for multiple buttons, or, in the case of a single button, add it to the a tag directly (without the s).
Font Family
By default, all buttons will use your site's body font family. This is the main font you see when adding content. If you would like a button to use the header text instead, you can add:
- .dak-buttons-accent
- .dak-button-accent
Font Size
By default the font size of the buttons matches that of text of the container it is in. You can make the button text smaller or larger by adding a class. These also work on the standalone dak-button (just drop the s in buttons):
- .dak-buttons-font-sm: 0.875rem
- .dak-buttons-font-md: 1rem (default)
- .dak-buttons-font-lg: 1.25rem
- .dak-buttons-font-xl: 1.5rem
Font Styles
In addition to changing the font family and size, you can also make the buttons bold or all uppercase (these, too, work on the dak-button):
- dak-buttons-uppercase
- dak-buttons-bold
Border Radius Styles
(Also available on the dak-button):
List buttons:
- .dak-buttons-rounded-xs: 3px
- .dak-buttons-rounded-sm: 6px
- .dak-buttons-rounded-md: 9px
- .dak-buttons-rounded-lg: 12px
- .dak-buttons-rounded-xl: 15px
- .dak-buttons-pill: Fully rounded corners
Button Alignment
Depending on the button style, the default alignment may not be what you're looking for. You can override it with the following classes (available on dak-button):
- .dak-buttons-start: Buttons will align left
- .dak-buttons-center: Buttons will align center
- .dak-buttons-end: Buttons will align right
Stacked Buttons
List style buttons can also be forced to be stacked into a single column with set sizes by adding:
- dak-buttons-stack
Button Colors
There may be instances where you'll need to show a button on a darker background and the button should be more visible. E.g., if your main color is a dark color but you have a button you'd like to show on a busy background image. These also work on the standalone dak-button
List Buttons
- .dak-buttons-light: Buttons will pull with a light background and dark text
- .dak-buttons-outline-light: Buttons will pull in with a light border, light text, and a transparent background
- .dak-buttons-clear-light: Buttons will pull in with transparent background and light text
Special Uses
Adding an arrow
These styles may be used together with JavaScript to create dropdowns, this style allows you to add an arrow quickly to the right side of the button.
- .dak-buttons-dropdown
Combining this with javascript to toggle the class is-active will flip the arrow to point up.