Follow

Button Update

https://projects.daknosupport.com/core/coder_docs/wikis/resources/available-styles

 

Buttons

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.  

Screenshot_from_2018-05-09_08-59-51.png

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.

Screenshot_from_2018-05-09_09-00-03.png

You can display multiple buttons in a singe row, up to a total of 6, by appending the -# to the .dak-buttons class:

  • .dak-buttons-2
  • .dak-buttons-3
  • .dak-buttons-4
  • .dak-buttons-5
  • .dak-buttons-6

Screenshot_from_2018-05-09_09-06-03.png

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.

Screenshot_from_2018-05-09_09-06-15.png

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

Screenshot_from_2018-05-09_09-19-14.png

Auto-Width buttons will resize themselves to fit the text displayed. If the text vary in length, then so will the buttons.

  • .dak-buttons-length-auto

Screenshot_from_2018-05-09_09-44-06.png

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

Screenshot_from_2018-05-09_10-03-51.png 

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

Screenshot_from_2018-05-09_12-03-49.png

  •  .dak-buttons-bold, dak-button-bold

Screenshot_from_2018-05-09_12-04-37.png

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

Screenshot_from_2018-05-09_13-14-09.png

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

  • .dak-buttons-stack

Screenshot_from_2018-05-09_13-15-53.png

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

Screenshot_from_2018-05-09_13-25-14.png

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

Screenshot_from_2018-05-09_13-29-34.png

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.

  • .dak-buttons-height

Images can be added to buttons without an extra class. 

 

Screenshot_from_2018-05-09_14-35-37.png

Screenshot_from_2018-05-09_14-42-55.png

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:

Screenshot_from_2018-05-09_14-45-09.png

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