2 Webflow Button Tricks That Make Your Work Easier

Many people do too much work when it comes to button effects. You change the background color of all primary and secondary buttons while hover or while holding down your finger (press). On the one hand, the link to the color palette is often lost as a result and, on the other hand, you have to go into each button individually. This trick gives you a quick and easy effect, which I use quite often from tablet and smartphone breakpoints (i.e. for all touch devices). Try it out!

Especially when there are many different buttons with their own background colors on a website, it is often a lot of work to have to create a color change for each button individually as a hover effect. And that's where this trick comes in. By applying a CSS box shadow inwards, you can “imitate” a second layer as a background color. Set this to transparent black and therefore, in combination with another color, it has a darkening effect. This saves you a lot of clicks and you don't have to add more colors to your color palette. The great thing about this method is that, in contrast to Image & Gradients, you can also animate this color change with Box Shadow (Transition).