DEV Community

Cover image for Creating a Call to Action Button
Kern Designs
Kern Designs

Posted on

Creating a Call to Action Button

I wrote a button web component. It's not perfect, but it's mine. As you know, I've been working on web components for a while now. Last week I started writing a new one. My goal for this project has been to get more comfortable with JavaScript and my abilities.

Issues

One of the things I am continuously learning is Windows OS is awful. I'm a long time user and would normally say I love it but over the past few weeks it has been horrible. Yarn and Windows must be mortal enemies that decided to come together to make my life hell. They won. Yarn has been so difficult to use. I finally figured it out but I would not recommend mixing Windows and Yarn in the future.

Successes

Good thing that happened - utilizing other elements and libraries actually was much easier than I remember! With like five lines of code there is now an icon in my button. That was so easy. I will definitely be doing that in the future. I also used different states of the button. This was also much easier than I thought it would be. The button can change when its active, disabled, hovered, and focused. Most of this was done through CSS although I did have to use JS for the disabled property. Overall, this button was a success!

Here it is!
Alt Text

This has been a great experience for me to learn. I successfully feel much more confident and I have a working button! Keep your eyes peeled for it to be on npm, but for now check out my GitHub repo.

https://github.com/hvk5388/cta-button/tree/main/hktb

Discussion (0)