← All elements
<button class="pc-roll" type="button">
<span class="pc-roll__clip">
<span class="pc-roll__in" data-text="Add to cart">Add to cart</span>
</span>
</button>About this button
A button whose label rolls upward and is replaced by an identical copy on hover, using a data attribute and a clipped pseudo-element. 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.