Follow

Adding buttons to your website

Available With:
  • DaknoAdmin
  • DaknoLegacy

Styling Links into Buttons

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 html tag. By default, the size of this button is 240px wide.

<a href="#" class="dak-buttons-single">Find Your Dream Home</a>

single-button.jpg

 

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.

list-links.jpg

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.

button-options.jpg

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. 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-buttons-single 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

auto-width-buttons.jpg

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.

button-height.jpg

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.

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

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:

  •  .dak-buttons-font-sm: 0.875rem
  •  .dak-buttons-font-md: 1rem (default)
  •  .dak-buttons-font-lg: 1.25rem
  •  .dak-buttons-font-xl: 1.5rem

 button-font-sizing.jpg

Font Styles

In addition to changing the font family and size, you can also make the buttons bold or all uppercase:

 

  • dak-buttons-uppercase
  • dak-buttons-bold

Border Styles

List buttons:

  • .dak-buttons-rounded-xs: 3px
  • .dak-buttons-rounded-sm: 5px
  • .dak-buttons-pill: Fully rounded corners

button-border-styles.jpg

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:

  • .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

buttons-stacked.jpg

 

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. Eg. If your main color is a dark color but you have a button you'd like to show on a busy background image.

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

buttons-light.jpg 

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

 button-arrow.jpg

Combining this with javascript to toggle the class is-active will flip the arrow to point up.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Need Additional Support?

Our team is here to help.

Contact Us
Powered by Zendesk