Buttons

Code Snippet Library

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 Dark Background

Button Style with Light Background

Button Style with Rounder Edges

This look is created by changing 5px border radius to 20px.

 <details style="margin-bottom: 2.5rem;">
    <summary style="display: inline-block; background: #E4FED8; border: 3px solid #008755; border-radius: 20px; padding: 0.5rem 0.75rem; cursor: pointer;">Additional information</summary>
    <p style="margin: 1rem 2.5rem;">Content here.</p>
</details>

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, change the number of pixels used in the border radius (border-radius: 20px;) 5px is less round and 20px is more round. 
• 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).
• For a link that looks like a button, see the Link With Button Style page in the Page Formatting module.