Dev.to tricks I wish I knew before
OpenSource for Webcrumbs ・ Oct 28 '23
We're diving into creating captivating buttons that not only look good, but invite interaction. This is a short guide on how to code five distinct buttons for your web project, each with a unique call to action, leading users to your repository. We will use the WebCrumbs GitHub repository as an exemple. Here's how to get your hands dirty:
The Introduction Button
Code a button with the label "See our GitHub." This is your handshake to the world, the front door to your creation.
<a href="https://github.com/webcrumbs-community/webcrumbs" class="button">
![See our GitHub](https://dabuttonfactory.com/button.png?t=See+our+GitHub&f=Open+Sans-Bold&ts=26&tc=fff&hp=45&vp=20&c=11&bgt=unicolored&bgc=0000EE)</a>
The Invitation Button
Craft a button that beckons with the words "Explore WebCrumbs." It's like saying, 'there’s more beneath the surface.'
<a href="https://github.com/webcrumbs-community/webcrumbs" class="button">
![Explore WebCrumbs](https://dabuttonfactory.com/button.png?t=Explore+WebCrumbs&f=Open+Sans-Bold&ts=26&tc=fff&hp=45&vp=20&c=11&bgt=unicolored&bgc=0000EE)</a>
The Engagement Button
This button with the label "Dive into Code" is where curiosity meets code. It's the first step into a larger world.
<a href="https://github.com/webcrumbs-community/webcrumbs" class="button">
![Dive into Code](https://dabuttonfactory.com/button.png?t=Dive+into+Code&f=Open+Sans-Bold&ts=26&tc=fff&hp=45&vp=20&c=11&bgt=unicolored&bgc=0000EE)</a>
The Connection Button
A button that invites them to "Join the Conversation" is a button that says you value their input.
<a href="https://github.com/webcrumbs-community/webcrumbs" class="button">
![Join the Conversation](https://dabuttonfactory.com/button.png?t=Join+the+Conversation&f=Open+Sans-Bold&ts=26&tc=fff&hp=45&vp=20&c=11&bgt=unicolored&bgc=0000EE)</a>
The Integration Button
Lastly, roll out the red carpet with a "Become a Maker" button. It's an invitation to contribute and belong.
<a href="https://github.com/webcrumbs-community/webcrumbs" class="button">
![Become a Maker](https://dabuttonfactory.com/button.png?t=Become+a+Maker&f=Open+Sans-Bold&ts=26&tc=fff&hp=45&vp=20&c=11&bgt=unicolored&bgc=0000EE)</a>
Each button is a journey, a narrative, and an invitation. They're not just static elements; they're dynamic invitations to experience what you've built, to explore, engage, connect, and integrate. Now, it's your turn to create buttons that tell your story.