CODEWITHSUNDEEP
javascripthtmlcss
Steven Matthews
Steven Matthews

Reputation: 11275

How to make round buttons

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.

Upvotes: 13

Views: 67087

Answers (3)

Andreas Eriksson
Andreas Eriksson

Reputation: 9027

With border-radius:

button {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 1px solid #000;
}
<button onclick="alert('you done clicked the button')">Clicky</button>

Upvotes: 23

Kevin Anthony Oppegaard Rose
Kevin Anthony Oppegaard Rose

Reputation: 1003

You can do this quite simply with CSS3:

#button {
    width:100px;
    height: 100px;
    border-radius:100%;
    background-color:red;
}
<div id="button"></div>

And use an onclicked event to make it a button.

Upvotes: 3

Damien Knox
Damien Knox

Reputation: 1

border-radius need not be a percentage. Try setting it in pixels instead.

Upvotes: -2

Related Questions