2 Webflow Button Tricks, die dir das Arbeite erleichtern!

Viele machen sich zu viel Arbeit, wenn es um Button Effekte geht. Sie ändern bei Hover oder bei gedrücktem Finger (press) die Hintergrundfarbe von allen primären und sekundären Button. Zum einen geht dadurch oft die Verknüpfung zur Farbpalette verloren und zum anderen muss man so in jeden Button einzeln reingehen. Dieser Trick ermöglicht dir einen schnellen und einfachen Effekt, den ich ziemlich oft ab Tablet und Smartphone Breakpoints einsetze (also für alle Touch-Devices). Probier’s mal aus!

Gerade wenn es viele verschiedene Button mit eigenen Hintergrundfarben bei einer Website gibt, ist es oft viel Arbeit, für jeden Button einzeln einen Farbumschlag als Hover-Effekt anlegen zu müssen. Und genau da kommt dieser Trick ins Spiel. Indem du einen CSS Box-Shadow nach innen anwendest, kannst du eine zweite Ebene als Hintergrundfarbe „imitieren”. Diese setzt du auf ein transparentes Schwarz und dadurch hat sie in Kombination mit einer anderen Farbe einen abdunkelnden Effekt. Das spart dir viele Klicks und du musst auch nicht weitere Farben in deiner Farbpalette anlegen. Das tolle bei dieser Methode ist, dass du diesen Farbumschlag mit Box Shadow im Gegensatz zu Image & Gradients auch animieren kannst (Transition).