Streaming live at 10am (PST)

Button Hover Effects


#1

Hello! Anybody have any clue how to create the hover effect for #14 on this website:
http://simbyone.com/demo/30-css-hover-effects-for-buttons/

Thanks so much in advance!
Rhami


#2

There are probably multiple ways to do this. How I would do it would be via an interaction.

Box 1- Button container positioned relative
Box 2 (inside Box 1) - empty div with white bg with transparency set to 50% transparency and positioned absolute, 100% height/width
Box 3 (inside Box 1)- empty div with transparent bg and 1px border set to 0% transparency and positioned to absolute, 100% height/width and trasform/scale set to 1.2

Your interaction then only has to be a hover on Box 1 that triggers Box 2 to go to transparency 0% and scale .5 simultaneously, while Box 3 goes to 100% transparency and scale 1.0


#3

You got it thanks man!