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.
Top comments (1)
Hey there! Thanks for clicking through and reading all about buttons. Who knew such a small element could have such a big impact? Appreciate your time and interest. Keep pushing those buttons and making the web a more interactive place! ππ΄