← All elements
<div class="bp"><input type="radio" name="b" id="bm" checked><label for="bm">Monthly</label><input type="radio" name="b" id="by"><label for="by">Yearly <em>-20%</em></label><i></i></div>About this button
A monthly or yearly switch with a sliding thumb and a savings badge, built from two radio buttons.
How it works
Two radio inputs are visually hidden and their labels sit on top of a sliding dark thumb. Sibling selectors move the thumb and change its width depending on which radio is checked, and the checked label turns white so it stays readable on the dark pill.
Ways to customise it
- Edit the label text and the badge.
- Change the thumb colour from #0f172a.
- Add a third option by adding another radio and a new offset.
Good to know
Radios keep this fully keyboard accessible with arrow keys. The focus-visible outline appears on the label. Because widths are fixed, adjust the 94px values if you change the text.
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.