For the past couple weeks my class has been working on a call-to-action button. These buttons are categorized as the most important on the page—think like the “Sign Up Now” button on every website you’ve ever been on. So naturally, my group decided to recreate the login button from Club Penguin PS: You have to click Play Now! first.
Once we finished the main animation of the button, Jonah and I started splitting the work. He would be in charge of button logic, and I would do the styling. I was able to follow a demo to figure out how to get the properties to change the CSS variables. However, I think there is an easier way to do this, which I will refactor to if possible. I have found that CSS work is more annoying in web components, or maybe I’ve just never put this much detail into a single button. But I keep finding myself making more syntax errors in CSS than ever before with the OWC workflow. We are still in the process of determining what properties of the styling we should expose in our component, so the rest of the CSS will be finished this week.
Admittedly, there is still a lot of work to be done on this button, since my team has been busy with other work. We plan to create a small, medium, and large size for the button, so the user won’t be able to mess up the penguin animation (that’s the most important part of our button, duh). Other than that, we just need to finalize the styling of the button and work on accessibility.
Repo for Call To Action buttons based on classic childhood games: https://play.cprewritten.net/