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
<details style="margin-bottom: 2.5rem;">
<summary style="display: inline-block; background: #BE0000; border: 1px solid #BE0000; 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
<details style="margin-bottom: 2.5rem;">
<summary style="display: inline-block; background: #E2E6E6; border: 3px solid #BE0000; padding: 0.5rem 0.75rem; cursor: pointer;">Additional information</summary>
<p style="margin: 1rem 2.5rem;">Content here.</p>
</details>
Button style With rounded edges
<details style="margin-bottom: 2.5rem;">
<summary style="display: inline-block; background: #E2E6E6; border: 3px solid #BE0000; 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
3pxto4pxfor a thicker border or2pxfor thinner and so on).
0 Comments
Add your comment