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.
Opens WPIDE on
Code
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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.