Kansas Department of Administration

Buttons Guide

On this page we will be talking about some styling options that can be implemented towards buttons.

If you do not know how to access the source code, or how to add styles follow the link below.

Getting Started

Sizing

Below you have 2 buttons with the same content, but 2 different sizes although they both have the "primary" class applied to them.

Regular

Morning

Custom Size

Goodmorning Lads

You can set the width of any button, and still keep it responsive across all devices by setting a max-width value and applying the remaining styles using inline css inside of the <a> element. The second button currently is set to 350px (pixels) you can set it to anything that you'd like. Below is the code used for the second button's css features. It is important to include the width and text-align properties when using this method.

CSS Styles

Sample Code

style="max-width: 350px; width: 100%; text-align: center;"

 

Further Explained

Taking a look at the code we can see that the first property is what sets the max-width of the button as long as it fits on the screen. If the screen is smaller than the specified button size the width property sets the width to fit the screen. Lastly the text-align property centers the text within the button.
**Note that if the text is wider than the button itself than the text will stack like the Example Below

What would you do for a klondike bar?

Button Styles

View Button Styles

© 2024 Kansas Department of Administration. All rights reserved.