如何制作圆形按钮

Question

如何使用HTML和CSS制作圆形按钮？我尝试使用背景图像，并使其具有一定的尺寸，但这似乎不起作用。具体来说，我想创建一个圆形按钮，点击一下即可启动Javascript脚本。

Answer 1

border-radius。

http://jsfiddle.net/12w83vtn/

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

Answer 2

您可以使用css3：

完成此操作

HTML -

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

CSS -

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

使用onclicked事件将其设为按钮。

Answer 3

两种方式：

1。）创建带圆角的图像，并用css颜色设置inbetween。

2.。）使用仅限于某些浏览器的css属性（FF使用一组，其他一些游戏，不确定chrome是否使用另一组）。

检查this list

Answer 4

border-radius 不必是百分比。尝试将其设置为像素。