# Text and button effects

> Give buttons and links a hover that rolls their letters, scrambles them or wipes a colour across, and put it on every button at once.

Source: https://uxdeck.app/guide/text-button-effects (checked against uxdeck on 16 October 2026)

Text and button effects are small hover moments: **Letter roll** rolls a button's words out as a copy rolls in, **Scramble** flickers each letter through random characters, and **Fill wipe** sweeps a colour across the button. They make a site feel finished without any extra variants.

Add one from the [Effects library](/guide/effects-library) (the **Hover** group), then tune it in **Effects** in the **Prototype** tab. They play while the button or link is hovered, or reached with the keyboard, so you do not need a Hover variant: the effect is the hover state. Put it on a component and every instance plays it.

## Letter roll

The words roll out letter by letter as a copy rolls in, while the button or link is hovered. It goes on a text, or a button with words. Dropped on a button built as a frame, it goes on the button's one text.

- **The letters go:** **Up** (the default) or **Down**.
- **Curve:** **Gentle** (the default), **Quick, then slow**, **Slow, quick, slow**, **Smooth** or **Even**.
- **Speed** (0.25x to 4.0x, 1.0x to start).

## Scramble

Each letter flickers through random characters before landing on its own. It goes on a text, or a button with words.

- **Plays:** **On hover** (the default), **As it comes into view** (the text stays hidden until it arrives, then types itself in), or **Both**.
- **Characters each letter shows** (1 to 10, 3 to start).
- **Drawn from:** the characters it flickers through. Leave it empty for a to z and symbols, or type your own, such as `01` or `#*+`.
- **Speed** (0.25x to 4.0x).
- **Cursor block on each letter:** adds a cursor block to the letters as they flicker.
- **Flicker colour:** the colour the random characters show in (the text colour unless you set one). Set it and you can add a **Second colour** too.

A screen reader reads the words as they are, never the random characters.

## Fill wipe

A colour sweeps across the button from a side while it is hovered, and its words can change colour. It goes on a button, a frame, a stack or a rectangle: the layer with the fill, not its text.

- **The colour comes:** **From the left** (the default), **From the right**, **From the bottom**, **From the top** or **From the centre**.
- **Curve:** **Quick, then slow** to start, or any of the others.
- **Speed** (0.25x to 4.0x).
- **Wipe colour:** a mint green (#A6F4C5) to start, or the button's own hover colour if it has one.
- **Text colour:** what the words turn to as the wipe arrives. A new wipe starts with dark or white ink, whichever reads better on the wipe colour; clear it and the words stay **Unchanged**.

If the button already had a hover colour, the wipe takes its place. Remove the wipe and the hover colour comes back.

## Put it on every button

Once one button looks right, press **Apply to every button on this page** under its settings. Every button and link on the page that says one short thing gets the same effect with the same settings, in one Undo. The toast says how many. A card that links somewhere, with longer words, is left alone.

## Catches

- **One letter effect per layer.** Letter roll and Scramble move the same letters, so a layer takes one of them: remove the other first.
- **A hover variant cancels the effect.** If the button, or a layer round it, also changes to another variant while hovered, that change replaces the button as the pointer arrives and the effect never plays. The panel warns you: remove the interaction or the effect.
- **Hover effects do not play on a touch screen,** where there is no hover. A Scramble set to **As it comes into view** or **Both** still types itself in there. For people who ask for less motion nothing moves either; a Fill wipe's colours change at once.
- **On the canvas** press play at the top right of the selection to see a hover effect; a button built as a frame plays its wipe and its words' roll together.

Text and button effects are on every plan.