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.
Opens WPIDE on
Code
$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 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.