# Button Block Hover Effects (SCSS)

> Adds a smooth lift, shadow and color shift when visitors hover over or focus Button blocks, with motion turned off for people who prefer reduced motion.

- Type: SCSS
- Runs: Site-wide header
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: scss, buttons, hover
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/button-hover-effects-scss/

## Code

```scss
$lift: 2px;
$shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
$speed: 0.2s;

.wp-block-button__link,
.wp-element-button {
    transition: transform $speed ease, box-shadow $speed ease, filter $speed ease;

    &:hover,
    &:focus-visible {
        transform: translateY(-$lift);
        box-shadow: $shadow;
        filter: brightness(1.08);
    }

    &:active {
        transform: translateY(0);
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-button__link,
    .wp-element-button {
        transition: none;

        &:hover,
        &:focus-visible {
            transform: none;
        }
    }
}
```

## Notes

Adjust the lift distance and shadow in the variables.

## How to use it

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