DEV Community

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

How to Make a Button on Dev.to

taillogs profile image Ryland G ・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>

or (as suggested by @Artemix)

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

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

Discussion

pic
Editor guide
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
Collapse
thomasbnt profile image
Thomas Bnt

oh πŸ‘Œ

Collapse
taillogs profile image
Ryland G Author

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
Collapse
khandfw profile image
Khan

Great work!

Collapse
taillogs profile image
Ryland G Author

Doesn’t shields.io generate normal markdown?