DEV Community

loading...
Cover image for How to Make a Button on Dev.to

How to Make a Button on Dev.to

Ryland G
Head of Product at Temporal. Previously lead architect and low-level systems programmer for scale out SaaS offering. Game engine developer, ML engineering expert. DMs open on Twitter.
・1 min read

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

Discussion (14)

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 Author

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 Author • 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 Author

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 Author

Doesn’t shields.io generate normal markdown?