Buttons

KU Buttons

To use the KU button the following classes are used: ku_button, ku_button-blue, and ku_button_content. Both ku_button and ku_button-blue are given to the container element, usually your link (<a>).  The ku_button_content class is assigned to an element inside of the <a> and is used to display the button text.

Example code:
<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>
KU Button


Training Calendar
CMS Help

If you are experiencing a critical issue with your live website, please contact the IT Customer Service Center at 864-8080 or itcsc@ku.edu.

For questions on CMS policy, look & feel, and all other issues, please visit our help page.

Please contact web services at 864-6415 or webservices@ku.edu for help with your site

Online help can be found under the How-To's section of this website.