← All elements
<div class="sa"><button>Save draft</button><button aria-label="More options"><i></i></button></div>About this button
A primary action joined to a caret segment with a divider, the pattern used for save-and-more menus.
How it works
Two buttons sit inside an inline-flex wrapper with overflow hidden and one shared radius, so they read as one control. A left border divides them, and the chevron is a rotated square with two borders that nudges down on hover.
Ways to customise it
- Recolour with the #4f46e5 and #4338ca values.
- Replace the chevron with text or an icon.
- Add a menu element beside it that opens on focus.
Good to know
Give the second button an aria-label because it has no text. Use real buttons so keyboard and screen reader users get the right behaviour for free.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.