Welcome to Ian's Buttons Tutorial, !

Back to Ian's Tutorials · Ian's Talk Page ··· Basic Tutorial

Buttons - Basic Tutorial

In this tutorial, , I, Ianbernard, will explain to you how to make links look like buttons such as the "Publish" button that you click when you're finished editing a page. Doing this makes your links look cleaner, and more professional. It's very simple, and there really isn't even a need for a tutorial on it.

Step One - Make your link

Let's begin with a link. View my linking tutorial if you don't know how to link pages.

[[User:Ianbernard/The Hawky Awards|The Hawky Awards]]

Result → The Hawky Awards

This is the link we will use for this tutorial. As you can see, it links to The Hawky Awards. Now to turn our link into a button, but how?

Linking Tutorial

Step Two - Add the <span>

Okay, now all we need to do to turn our link into a button is to add the <span> code for button. It's very simple, but if you don't do it right you could get very frustrated, and we don't want that.

Take the link we just made, and add <span class="button">___</span> to the code around the links desired text. Like so: ↓

[[User:Ianbernard/The Hawky Awards|<span class="button">The Hawky Awards</span>]]

Result → The Hawky Awards


Not every link needs to be a button. Please, just because you know how to make them buttons does not mean that you should turn every single one of your links. If you think you've taken the buttons too far, you probably have...

That's It!

Congratulations, ! You should now know how to successfully turn links into buttons! If you still need help with turning your links into buttons, go to the top of this page and click the "Ian's Talk Page", and leave me a message titled "Buttons Help". Myself or another member will assist you ASAP. Thanks for reading my tutorial.

Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.