# Button Block Style: Arrow

> Adds an "Arrow" style to the Button block that shows a small arrow after the text which nudges forward on hover, a classic "Learn more" look.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: block-styles, buttons, design
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/block-style-button-arrow/

## Code

```php
add_action( 'init', function () {
    register_block_style( 'core/button', array(
        'name'         => 'wpide-arrow',
        'label'        => 'Arrow',
        'inline_style' => '.wp-block-button.is-style-wpide-arrow .wp-block-button__link::after{content:"\2192";display:inline-block;margin-left:.5em;transition:transform .2s ease;}.wp-block-button.is-style-wpide-arrow .wp-block-button__link:hover::after,.wp-block-button.is-style-wpide-arrow .wp-block-button__link:focus-visible::after{transform:translateX(4px);}@media (prefers-reduced-motion:reduce){.wp-block-button.is-style-wpide-arrow .wp-block-button__link::after{transition:none;}}',
    ) );
} );
```

## Notes

The hover movement is turned off for visitors who prefer reduced motion.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Button Block Style: Arrow" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/