← All elements
<div class="qc"><button aria-label="Less">−</button><b>2</b><button aria-label="More">+</button></div>About this button
A pill with minus and plus ends around a count, styled for a cart row with press feedback.
How it works
A pill houses two round buttons and a number. The minus is light and the plus is dark for hierarchy, and both scale slightly on hover and shrink on press.
Ways to customise it
- Change the count.
- Swap the colours.
- Add a script to update the number.
Good to know
Buttons have aria-labels because they only show symbols. A real stepper must update the value and announce it.
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.