Creating engaging buttons for your dev.to posts
Tags: webdev, ui, frontend, javascript
Published: 2023-10-24 12:01:07

{% embed https://dev.to/opensourcee/trying-out-some-cool-devto-tricks-i-just-found-out-about-1572 %}

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](https://github.com/webcrumbs-community/webcrumbs) 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>

```html
<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>

```html
<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>

```html
<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>

```html
<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>

```html
<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.

[Embark on your button-making adventure with WebCrumbs.](https://github.com/webcrumbs-community/webcrumbs)