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) 

Try it out 

• Component Builder (to see how it works with your own content and images) 
• Dev Codepen (to experiment with all the code)

Sample patterns 

(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