Micro Projects and Wave Buttons

It’s been quite a while since I posted an update. Crazy year so far. One of the things that I wanted to do despite the craziness of this year is to code for myself. I feel as though it is important, in a way to take ownership of my own skills and to achieve a side vision of financial freedom/independence. That all starts with some small steps. Hence, how I thought about doing micro projects. To me these aren’t full websites or complicated ideas. They’re simple things I can do almost daily with the dual task of helping me become more familiar with technologies I’ve felt I didn’t have the time to learn as well as allowing me to brush up skills that I may not use everyday for work but am still interesting in digging into. The first microproject I thought of was button animations. I believe it was Google’s material design that popularized the “ripple” effect when buttons are clicked.

I wanted to play around with something similar while using to technologies I wasn’t familiar with: css variables and keyframes. I ended created a simple hover animation that infinite loops through changing background, text, and border colors.

Wave Button

One of the stipulations of this experiment with micro projects is that I’m only allowed to spend two hours on it. I think constraints help with creativity. We’ll have to wait and see how it pans out in the long run.