← All elements
<input type="checkbox" id="pb"><label for="pb" class="pbn"><span>Deploy</span></label>About this button
A button that fills like a progress bar when clicked, using a checkbox state and a scaleX transition on a pseudo-element.
How it works
A hidden checkbox is the state and the button is its label. A ::before pseudo-element covers the button, scaled to zero width from the left. When the checkbox becomes checked, a long linear transition scales it to full width, so the button fills like a progress bar, and the arrow in the text changes to a tick.
Ways to customise it
- Change the 2.5s duration to match your real task.
- Edit the fill colour #22c55e.
- Change the words and symbols in the label and its ::after.
Good to know
This is a visual demo of a loading button. A real action still needs script to do the work and to report errors. Keep a text change as well as the colour so the state is clear.
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.