Question

I’ve been looking through various websites and came across multiple ways to make “buttons”. What are the pros and cons to each way?

<div class='btn'><a>Click Me!</a></div>

<span class='btn'><a>Click Me!</a></span>

<a class='btn'>Click Me!</a>

CSS:

.btn{
 display:inline-block;
 min-width:100px;
 text-decoration:none;
 cursor: pointer;
}

Answer 1

Those are all three the exact same thing. They’re all just a link, the only difference is that parent class is used as a selector target. They are effectively identical.

There is one differences between the first and second 2, though. a div, by default, is a block element while a span and an a tag are both inline, thus a dive fills up the entire width of the container, but that can be changed with css (as your example does).

Why not just, I don’t know.. call me crazy.. but why not just use an actual button?

The only reason I can think of to NOT use a button is if you want the links to be search spider visible. If you’re going to use javascript to post a form, then i suggest using a button instead.