← All elements
<div class="ba"><input type="radio" name="ba" id="ba1" checked><input type="radio" name="ba" id="ba2"><div class="v"><div class="p a"><i></i><i></i></div><div class="p b"><i></i><i></i></div></div><div class="sw"><label for="ba1">Before</label><label for="ba2">After</label></div></div>About this button
A panel that crossfades between a plain and a polished version of the same design, switched by two radio buttons.
How it works
Two hidden radio inputs sit before a preview panel. The polished layer is stacked on the plain one with zero opacity, and checking the second radio fades it to full opacity through the general sibling combinator. The labels form a small pill switch beneath.
Ways to customise it
- Change the two panel styles.
- Replace the bars with real screenshots.
- Slow the .5s crossfade.
Good to know
Radios keep the control keyboard friendly and the labels say what each state shows. Both states are in the DOM, so describe the difference in text if it matters.
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.