DEV Community

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

Posted on

4

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

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay