Progress with CTA buttons with web components...

When I first started trying to create a call-to-action button using web components I had a bit of difficulty learning how to style CSS variables, and some difficulty getting my component to work due to some, very, interesting issues I had with yarn. Despite my initial difficulties and setbacks I've become much more comfortable developing my button and I have some ideas as to how I can make it better.

We were able to fix an issue with icons on our CTA button. When disabled, if the icons were clicked they would go to our link when they should have been is disabled. This was fixed by using a host: ([disabled]) state for our icons that disabled pointer events when the button was disabled. We were also able to add hover, focus, and active states to our cta button to ensure it had adequate functionality.

One of the biggest issues I had was not with coding with JavaScript itself, necessarily. I had issues starting the button using @open-wc but it was mostly with yarn. After some much needed help I was able to succesfully run my component with npm. I decided that since yarn on my PC is completed messed up beyond all belief I will be using npm to run my component going forward. I also had a few issues with pushing my code to GitHub and with using git in general, but I have since gotten those issues resolved.

Going forward I want to expand the functionality of the button to add some effects to it when clicked. For example I want to see if we can make a fireworks or confetti effect once clicking the button. I feel like adding some effects and making the button just more aesthetically pleasing is a good way to familiarize myself with the structure of web components code and with JavaScript, CSS, and HTML in general.

If you want to see my, very much still in progress, web component you can find it here:
https://github.com/TheKodingKrab/cta-button/tree/main/CEEK