← All elements
<div class='wrapper'>
<button type='button'>
<span>
<svg width="16" height="16" fill="currentColor" class="power-svg-icon" viewBox="0 0 16 16">
<path d="M7.5 1v7h1V1z" />
<path d="M3 8.812a5 5 0 0 1 2.578-4.375l-.485-.874A6 6 0 1 0 11 3.616l-.501.865A5 5 0 1 1 3 8.812" />
</svg>
</span>
</button>
</div>About this button
A soft, tactile power button with layered highlights and shadows and an inline SVG icon. Focusing or pressing it shrinks the icon and shifts the rim light.
How it works
The button face is built from stacked gradients and several box-shadows that fake a soft, raised plastic key. The icon is an inline SVG that inherits the text colour. Focus and active states scale the button and the icon and switch between two pseudo-element rim lights.
Ways to customise it
- Edit the hsl values in the base and accent gradients.
- Change the em-based sizes to resize everything.
- Swap the SVG for another symbol.
Good to know
It is a real button, so it works with a keyboard. The focus state is visible through the changed rim light, but add an explicit outline if your design needs a stronger cue.
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.