← All elements
<button class="sd"><b>Open</b><span>Welcome in</span></button>About this button
Two coloured halves cover the label and slide apart on hover to reveal the message underneath.
How it works
A cover layer with two colour halves sits on top of the real label. clip-path inset starts as the full rectangle and on hover collapses toward the centre, which makes the two halves appear to slide apart and uncover the text underneath.
Ways to customise it
- Change the two cover colours in the 90deg gradient.
- Edit the label inside the span for your own message.
- Switch to inset(50% 0) for a vertical split.
Good to know
The visible default label is the cover text, so make sure it describes the action on its own. Touch devices have no hover, so they will only see the cover; keep the key meaning there.
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.