How to make things have buttons?

If you have an item that you want to make into a button (e.g. a text link) you can create padding around it to enlarge it's size and give it a background colour so the clickable area is visible for people. The hover state lets you change the text/background colour for when someone puts their mouse over it.

Here is a very simple button:

HTML

<a href="http://example.com">Example Button</a>

a {
    padding: 25px;
    background: #ccc;
    color: #000;
}

a:hover {
    background: #369;
    color: #fff;
}

I've put this on Codepen if you wanted to play around and change parts of it to see how it works.

This is very rudimentary but gives you the basic idea. There are other link states to consider (active, visited, focus) and if you wanted several buttons to make some navigation you'll want to have the links in a list. If you follow the HTML and CSS courses they cover all of this.

/padding?

What do you mean by "have buttons"?

oops i meant how to have padding around it ?

James Bryer -

An easy way to think of the difference between margin and padding is that margins are used for creating space between elements, while padding is used for creating space within elements.

ahhh ok, but what i mean by padding is like making my text appear within a coloured box for visual effect?

Like the "browse our cupcakes" button but not making it a button. I just want the borders?

http://www.smellslikebakin.com