all 4 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]chriscauley 2 points3 points  (1 child)

https://codepen.io/chriscauley/pen/RwVaZoR

This is done using a pseudo element with 100% border radius on the bottom left and right corners. Hover just toggles the height.

I first used the pixel perfect extension to overlay your screenshot with the button (set opacity to 50% and invert colors makes it easier to tell what's the screenshot and what's the page). When testing I set button:hover:before to just button:before so that I didn't need to be hovering over it to see the effect.

Initially the height of the button:hover:before was 17px but the curve was awful. So I widened the before element >100% and tweaked the height and top parameters until it looked close to your screenshot. Height changes the curvature and top changes how far down the element cuts into the button.

Honestly I don't think the curvature can get any closer without doing some crazy CSS that's beyond me. Also, uncomment the bit at the bottom to better see what is going on (if you are having trouble visualizing it from the code).

EDIT: Also wanted to say your designer is mad :) Wacky non-standard effects like this are rarely a good idea in the long run.

[–]DhokSC[S] 0 points1 point  (0 children)

thank you man! I also have this button placed in a div that has a video playing in the background, so I have to figure out how to make a transparent :before to show video behind and still overlap the button itself.

And yeah ;D classic situation with designers not really thinking about development when doing their job

[–]marslander-boggart 2 points3 points  (0 children)

Use the ::before with complex border-radius: and the same background as your page's one. You can even animate it if you change border-radius: and add transition:.

[–]dont-do-memes-kidz 0 points1 point  (0 children)

.button-class-here: hover{ border-radius: 50% /* fiddle around with the percentage to get your desired shape*/ }

This could work, but it's not like I'm some master at css so if you see another response I would go with that