Illinois web toolkit documentation

Version 2.7.3

Component

Button

Description 

 The Illinois theme class il-button provides standardized styles for button elements. It is applied to the <a> tag or the <button> tag. 

What it looks like 

Example image (version 2.4, Dec. 8, 2021) 

Four buttons - blue, orange, blue outline, and orange outline

Try it out 

(In the examples below, replace elements in bold with your own content.)

The <a> tag

This is an example of a button applied to the <a> tag. If nothing else is specified, the default color settings of a blue outline are chosen.

<a class="il-button" href="https://illinois.edu">View Our College</a>

The <button> tag

You can also apply the il-button class to a button tag with an alert or other action associated. This button specifies solid orange color.

<button class="il-button il-orange">Send the Things</button>

CSS options 

Color options

  • Syntax: <a class=”il-button il-color value“> or <button class=”il-button il-color value>  
  • Color values available: 
    • il-white-blue – White button, blue border and text
    • il-white-orange – White button, orange border and text
    • il-blue – Blue button, white text
    • Il-orange – Orange button, white text
  • Default value: If nothing else is specified, the button will default to the il-white-blue color scheme. 
  • Required: No  

About this component 

  • Type: CSS classes 
  • Introduced in: v2.3.0; 9/29/2021 
  • Deprecated?: No