Save Slide Button

A save button whose label steps aside so the icon can take its place.

About this tool

On hover the label fades where it stands and the icon travels into the room it leaves, so the control changes completely without moving a pixel of its own box. Nothing is animated that affects layout: the width is fixed by the resting label, and only opacity and transforms run, which keeps the whole gesture on the compositor. Every length, colour and duration is a custom property, and the interaction state is exposed as a control so the hover can be held still while it is being designed.

In collections: CSS Buttons & Animated Button Effects Micro Interactions: UI Animation Examples

Guide: Tailwind Tooltip: Accessible CSS, Popover API and React

UI/UX · HTML / CSS All tools

Button

State

rest hover

Label

Text size px

Weight

400 600 800 1000

Corner radius px

Padding Y em

Colour

Background

Background on hover

Label

Icon

Icon on hover

Stage

Stage colour

#ffffff