WiscWeb - WordPress UW Theme - Creating Buttons

Users can create buttons using specific HTML code and CSS stylings. This document will show you how.

Buttons can be used to add some additional style to your site and create more interactivity between your audience and your content, similar to what is used on the main page of https://wiscweb.wisc.edu.

Buttons demonstration

To achieve this effect, you must create a Text Block page element, and click on the Text tab. Once you have done that, insert this code:

<a class="uw-button button-cta button-cta-reverse" !important;" tabindex="0" href="insert URL here">Link Text Here</a>

This is what your button will look like:

Sample Button Placement

You can now use CSS styling to edit the look of your button. Again, edit the code in the Text tab:

<a class="uw-button button-cta button-cta-reverse" style="background: #c5050c; border: 0px; color: #fff !important;" tabindex="0" href="/features/">Features</a>
The style="" value represents the customization of the button. In the case of this example, the background color is being changed to a red value, there is no border being applied, and the text color is changed to white. The resulting button will look like this:

Styled Button Example

Buttons can be used anywhere you have access to a Text Block.



Keywords:style, css, code, html, text block   Doc ID:83212
Owner:Matthew G.Group:WiscWeb CMS
Created:2018-06-26 13:46 CSTUpdated:2018-10-24 10:02 CST
Sites:DoIT Help Desk, WiscWeb CMS
Feedback:  1   0