DEV Community

Cover image for Click me
Liz
Liz

Posted on • Updated on

Click me

Or, don't. A button can still react.

Something you don't think about in every day life is how others who are less fortunate than you have to navigate life and the modern day world of technology. You don't know what's missing until the day someone needs it. There are so many amazing advances and aids, but they are rendered entirely useless if your design doesn't accommodate for them.

There is so much that goes into a button that thousands of users may click every single day, and there are so many applications and emotions that can go behind a single "click" or hit of the enter button. You've probably used a button to submit a college or job application, to send a message that makes or breaks your year, or even something just as simple as viewing another webpage. I'll have to click publish and regret all my choices after I finish writing this.

I think the most difficult thing I've encountered with creating a call to action (CTA) button is the amount of freedom I've been allotted. And, the amount of time I don't want to spend on my other assignments. I love the world of design and programming that can be combined with creating web components. That being said, I spent two hours researching how to design in a button in CSS just to make it look cool when you hover over it or focus on it. That's when you find out there's a ten times more efficient way to make something. For example, incorporating reflect to make the colors flip. And sometimes those things come with experience.
Screen Shot 2021-09-26 at 11.04.35 PM
Screen Shot 2021-09-26 at 11.04.45 PM
While I was able to get the bookmark icon working in class, you learn about the dependencies and libraries involved with creating web components. Without the contributions of others, I wouldn't be able to get a simple bookmark icon without hours and hours of work. You also learn that the dinosaur icon requires another library, and that's why you can't see it when you try to implement it.

There's still some work to be done. I haven't implemented disable yet.

Here's my thing: https://github.com/runtimeErrorsMadeEasy/ctaButton

Here's what I was listening to when I wrote this:
https://open.spotify.com/track/3QcWLlzSUFFWotRzxv6rbQ?si=1fd5fe1d244e49ef

Discussion (1)

Collapse
joelbonetr profile image
JoelBonetR • Edited on

Hey! you got me, not gonna lie. Good intro, chewy but good one 😆

codepen.io/joelbonetr/pen/BaZGeRX

You encouraged me to make a CTA just for fun in my 10 free minutes, hope you like both the CTA and the CodePen platform, I feel it useful even being a senior with a 100% ready to code environment :D (I use it to create examples for the posts here or for my colleagues or juniors in my daily job).

Take a look into my profile to see if any post interests you, have a great day! 😄