Buttons

There are several styles of buttons within the CMS. Some styles work with the 2017 KU Brand and others work with the 2012 KU Brand.

NOTE: Implementing buttons within a page is fairly straightforward, but it does require some HTML coding.

NOTE: There are new buttons styles for the 2017 Brand: Buttons that span the full-width of the sidebar and buttons that span the full content width.

To add a KU Button with the 2017 Brand:

1. Copy the following code and paste into the Source view of the Body field

<div class="ku_button_brand"><a class="ku_button_blue" href="#">Button Text</a></div>

There are several styles:

Non-fixed Width Buttons:

• ku_button_blue
• ku_button_lake
• ku_button_disabled
• ku_button_long
• ku_button_no_border​​​

Sidebar Buttons:

• ku_button_brand button_justified_blue sidebar
• ku_button_brand button_justified_lake sidebar
• ku_button_brand button_justified_night sidebar

Justified Buttons:

• ku_button_brand button_justified_blue​
• ku_button_brand button_justified_lake
• ku_button_brand button_justified_night

2. To use a different style replace ku_button_blue with another class

<div class="ku_button_brand"><a class="ku_button_lake" href="#">Button Text</a></div>

3. Replace Button Text with the button label

<div class="ku_button_brand"><a class="ku_button_lake" href="#">Button Text</a></div>

4. Finally replace the # between the quotes with the URL of button's destination

<div class="ku_button_brand"><a class="ku_button_lake" href="http://www.ku.edu/">Button Text</a></div>

2017 Brand Button Examples:

Non-fixed Width Buttons

<div class="ku_button_brand"><a class="ku_button_blue" href="#">Button Text</a></div>

<div class="ku_button_brand"><a class="ku_button_lake" href="#">Button Text</a></div>

<div class="ku_button_brand"><a class="ku_button_night" href="#">Button Text</a></div>

<div class="ku_button_brand"><a class="ku_button_disabled" href="#">Button Text</a></div>

<div class="ku_button_brand"><a class="ku_button_long" href="#">Button Text</a></div>

<div class="ku_button_brand"><a class="ku_button_no_border" href="#">Button Text</a></div>

---

Sidebar Buttons

<div class="ku_button_brand button_justified_blue sidebar"><a class="ku_justified_button_blue" href="#">Button Text</a></div>

<div class="ku_button_brand button_justified_lake sidebar"><a class="ku_justified_button_lake" href="#">Button</a></div>

<div class="ku_button_brand button_justified_night sidebar"><a class="ku_justified_button_night" href="#">Button Text</a></div>

---

Justified Buttons

<div class="ku_button_brand button_justified_blue"><a class="ku_justified_button_blue" href="#">Button Text</a></div>

<div class="ku_button_brand button_justified_lake"><a class="ku_justified_button_lake" href="#">Button Text Really Really Long</a></div>

<div class="ku_button_brand button_justified_night"><a class="ku_justified_button_night" href="#">Button</a></div>

---

To add a KU Button with the 2012 Brand:

The steps are pretty much the same as with the 2017 Brand buttons.

Examples:

KU Button

<a class="ku_button ku_button-blue" href="#ku_button"><span class="ku_button_content">KU Button</span></a>

KU Button

In addition to using the generic button options you can also customize the button by using either inline styles or custom css.

Inline example: In this example "KU" is bolded and "Button" is not. Button is also KU red and underlined instead of the default white.

<a class="ku_button ku_button-blue" href="#ku_button"><span class="ku_button_content">KU <span style="font-weight:normal; color: #e8000d; text-decoration: underline;">Button</span></span></a>

KU Button

Stylesheet example: You can use custom CSS to configure the button too. You can either override the .ku_button_content class or you can assign your own ids/classes and then use css to style them.

Note: due to the existing CSS a more specific rule is used to target the button and ensure that the custom CSS overrides the styles by using #region-content #ku_custom_button below:

#region-content #ku_custom_button {
    -moz-border-radius: .25em;
    border-radius: .25em;
}

#region-content #ku_custom_button .ku_button_content {
    color: #FFC82D;
    padding: 0.2em 0.5em;
    font-weight: normal;
}

<a class="ku_button ku_button-blue" id="ku_custom_button" href="#ku_button"><span class="ku_button_content">KU Button</span></a>