Как сделать круглые кнопки

Как сделать круглые кнопки с помощью HTML и CSS? Я попытался использовать фоновое изображение и сделать его определенным размером, но это, похоже, не работает. В частности, я хотел бы сделать круговую кнопку, которая при щелчке запустит Javascript script.

Ответ 1

С border-radius.

http://jsfiddle.net/12w83vtn/

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

Ответ 2

Вы можете сделать это довольно просто с помощью css3:

HTML -

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

CSS -

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

И используйте событие onclicked, чтобы сделать его кнопкой.

Ответ 3

Два способа:

1.) Создавайте изображения с закругленными углами и устанавливайте интервал между цветами css.

2.) Используйте свойства css, которые ограничены некоторыми браузерами (FF использует набор, сафари - некоторые другие, не уверен, что хром использует еще один набор).

Отметьте этот список