Since starting the development of a call-to-action (CTA) button for IST 402, I have encountered quite a few challenges while learning a lot about open web components and LitElement. My partner and I chose to develop a CTA button modeled after a circular button on an e-commerce clothing site, which would act as a building block for learning about atomic web design.
Thus far, my partner and I have created the button component itself, linked it, and have completed a lot of the responsive CSS behavior for the button itself. This includes resizing the button when different text is inserted into it, as well as changes in state when it is hovered over and focused on. We plan to also create behavior for "active" and "disabled" states, and are currently working on these. In addition, we've added optional icon support that features conditional rendering, allowing for the creation and removal of an icon in our button from the "inspect" tab of a browser. We have began working on our button's dark mode behavior as well, designing a way for dark mode to be initiated within the button's tag.
Here is the repository that exhibits our progress thus far: circle-button-ad Repository
Building a responsive, reusable circular button is hard. As the lead developer in my partner team, I learned this very quickly and figured out my knowledge of CSS was not great almost immediately. That said, lots of browsing CSS on overly-specific sites has led to me learning a lot more about it than I assumed I would when starting this button. I can proudly say I know more about styling a button than I did when I started this assignment.