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.
Recreating an old clunky, Flash button in Open Web Components is actually way dumber and more annoying than you would think. I started the component by getting the penguin animation down. Normally you would do hover animations in CSS, BUT we are changing the source of the image in the DOM. Therefore, CSS can’t do anything for us. Enter JavaScript. This was easily achieved (and later improved by my teammate Jonah) by attaching event listeners to our button for mouse enter and mouse exit. When the mouse enters the button, change the image. When the mouse leaves the button, change the image back to the original.
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.
PenStat-CTA
Repo for Call To Action buttons based on classic childhood games: https://play.cprewritten.net/
Top comments (0)