DEV Community

Cover image for Web Components- Call to Action (CTA) Button
Taylor-Bracone
Taylor-Bracone

Posted on • Updated on

Web Components- Call to Action (CTA) Button

Currently, in IST 402, we’ve been working on web components in the effort to make a call to action (CTA) button. The button that we are designing was inspired by the website Headspace, a meditation calming website (https://www.headspace.com). To begin the workings of our button, we created a web component with open wc and continued from there.

Difficulties/Issues
My partner and I have been working hard to understand issues that have arisen on both of our ends in the efforts to make this button. One of the hardest things so hard is dealing with merge conflicts within Github as well as at times yarn. Another struggle that we dabbled with was not changing to the correct directory at some points. While these all seem minor they made huge differences.

This was my first time using a fork in Github. When doing so, you have to remember to fetch and merge before a git pull can occur to stay up to date on the changes. The purpose of the fork is so that changes can be made without directly affecting the original repository. Eventually, we figured it out.

Successes
In class, we went over how to add an icon to my button. This was a huge success and easier than I imagined it would be. The button also has different states such as disable versus active and hovered to name a few. CSS was also included to mimic the scheme of the website we were modeling it after. Appearance and accessibility is very important. Overall, I enjoyed the planning and thought process that went into the composing button. I can’t wait to expand my knowledge further.

State of Element(s):
Alt Text
Repo: https://github.com/Taylor-Bracone/cta-button/tree/main

Top comments (0)