How to make round buttons

Question

How would I make round buttons using HTML and CSS? I tried to use a background image, and make it a certain size, but that doesn't seem to work. Specifically, I would like to make a circular button, which on a click would launch a Javascript script.

Answer 1

With border-radius.

http://jsfiddle.net/12w83vtn/

button {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 1px solid #000;
}

Answer 2

You can do this quite simply with css3:

HTML -

<div id="button">
</div>

CSS -

#button {
    width:100px;
    height: 100px;
    border-radius:100%;
    background-color:red;
}

And use an onclicked event to make it a button.