DEV Community

Cover image for How to Make a Button on Dev.to
Ryland G
Ryland G

Posted on

25 7

How to Make a Button on Dev.to

If you've read any of my last few posts you may have noticed that I started including a twitter image at the end. You might not have realized that it was actually a fully functional button.

I hadn't seen anyone do this before. Luckily, Dev.to is open source, so it was easy enough to see that the markdown parser permitted a simple image button. I've included an example below.

<a href="https://twitter.com/<YOUR_TWITTER_HERE>" rel="some text">
![Foo]
(https://thepracticaldev.s3.amazonaws.com/i/gmrz82bjwhej1f1iqb1e.png)</a>
Enter fullscreen mode Exit fullscreen mode

or (as suggested by @artemix)

[![](https://thepracticaldev.s3.amazonaws.com/i/gmrz82bjwhej1f1iqb1e.png)](https://twitter.com/<YOUR_TWITTER_HERE>)
Enter fullscreen mode Exit fullscreen mode

That code (with your own twitter URL added) will display a follow button for your twitter in a post. Example below

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (11)

Collapse
 
ben profile image
Ben Halpern

I feel like a call-to-action button would make for a pretty useful liquid tag to make stuff like this fairly native.

Collapse
 
taillogs profile image
Ryland G

Couldn’t +1 more. That would be awesome.

Collapse
 
michael profile image
Michael Lee 🍕

+1

Collapse
 
thomasbnt profile image
Thomas Bnt

oh 👌

Collapse
 
taillogs profile image
Ryland G • Edited

I write a lot of HTML, so it was just what I naturally chose. That might should work too!

Edit: Updated the post and credited you. Great suggestion!

Collapse
 
markel profile image
Markel F.

Funny thing, a couple of days ago my friend gave me the button you used as a header image. It was a nice present.

Collapse
 
taillogs profile image
Ryland G

What a coincidence.

Collapse
 
markel profile image
Markel F.

The world is a small place, isn't it?

Collapse
 
angelarae63 profile image
Angela Whisnant

Nice!

Collapse
 
khandfw profile image
Khan

Great work!

Collapse
 
taillogs profile image
Ryland G

Doesn’t shields.io generate normal markdown?

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay