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 the Same Color for Border and Background

Additional information

Content here.

Code: Same Border and Background Color Button

<details style="margin-bottom: 2.5rem;">
<summary style="display: inline-block; background: #1E407C; border: 1px solid #1E407C; padding: 0.5rem 0.75rem; cursor: pointer;"><span style="color: #ffffff;">Additional information</span></summary>
<p style="margin: 1rem 2.5rem;">Your content.</p>
</details>

Button Style With Different Colors for Border and Background

Additional information

Content here.

Code: Different Border and Background Color Button

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

Button style With rounded edges

Additional information

Content here.

Code: Button style With rounded edges

 <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, 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).