University of Utah

Buttons

Updated on

This code creates an interactive button that works on all devices and provides a pointer symbol when the user hovers their mouse over the button to make it clear this is an interactive element. Use lead-in or button text as another indicator, and if you change the colors, be sure to use good color contrast.

Button Style With the Same Color for Border and Background

Button Style With Different Colors for Border and Background

Button style With rounded edges

Modifications and Guidelines

  • Use button text or lead-in text to make it clear this is an interactive element.
  • If you would like to round the corners of the button, see the tutorial page in the Borders and Lines module for more information. 
  • Use good color contrast between the button color and button text. 
  • You can use different colors for the background and borders of the button. 
  • You can change the thickness of the border (change 3px to 4px for a thicker border or 2px for thinner and so on).

0 Comments

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Previous Article Basic Show/Hide Toggle
Next Article Accordions