What is a CTA?
A CTA button, or Call to Action button, just tries to get the user to do something. An example would be the like button for this article, or the Spotify Listen Now button. These buttons aren't anything complex or asking someone to act to save the world, but they must ask the user to do something.
Our CTA
So...we modeled our CTA off of the reprogrammed Club Penguin website We ripped the Create a Penguin image and based our button to be an image button without a text tag. It's...something.
Issues
Putting text on top of images is difficult, but not impossible. I used another web component, meme-maker, to overlay text on the image. It doesn't offer any text color change, but it does allow us to change the text size. We also included an icon in the button, but at the moment I have no idea what we are going to do with the icon. I also had some issues with tab-order. Since we have a meme-maker, a, and img tag, we have multiple tags that get tabbed through while it appears to sit on the same element. I had tried tab-order: "-1", but it was not working for a while. The fix was that Safari has a weird option by default that it doesn't tab through all of the elements on a page.
GitHub
penguin-state-button
Top comments (0)