search

Algorithm-Arena / weekly-challenge-20-extravagant-button

1 stars 0 forks source link

Submission - Aquarium Button #1

Open cixzhang opened 1 month ago

cixzhang commented 1 month ago

What's something people like to press or tap? Aquarium glass!

Code and demo: https://codepen.io/cixzhang/pen/xxNqjwv Video: https://www.youtube.com/watch?v=1C1icyLpYgA

Works like a regular button including keyboard support. Fish die when the button is disabled but return to life once it's reenabled. The button can support content of any horizontal length.

It uses CSS transforms to create a 3D look. I couldn't find a good way to create curved 3D shapes with CSS, so the water is unfortunately a series of flat rectangles which looks convincing enough when animated.

Uzo2005 commented 1 month ago

This is just blowing my mind. Nice work Ma!!! :+1: