html - 如何将提交按钮的形状更改为圆形

Question

可能重复：
仅使用 css 绘制圆

我想知道是否有任何方法可以将提交按钮的形状从矩形更改为圆形？

我不想使用圆形图像解决方案。我想要按钮的所有其他特性，就像 css 样式一样。

score 14 · Accepted Answer

例子：

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

上面的例子会给你一个规则的圆圈。

如果你只想要一个有点圆的形状，试试这个：

.button {
    width: 100px;
    height: 30px;
    background-color: #000;
    border: solid 1px #000;
    border-radius: 5px
}

现场演示：常规圆形
现场演示：圆形
现场演示：带文本的输入按钮

score 5 · Accepted Answer

您的问题已经得到解答，但我建议您使用Twitter Bootstrap。

它是一个 HTML/CSS 框架，可让您轻松制作出色的按钮（以及其他按钮）。

此按钮是“跨浏览器”，这意味着它们与 Internet Explorer 兼容。

只有一个类 -btn你可以风格化<button>,<input type="button">或<a>.

这个：

<button class="btn"></button>

给出：

在此处输入图像描述

您还可以使用可选类快速自定义按钮：

btn-primary, btn-info, btn-success,和. btn-warning_btn-dangerbtn-inverse

这些类像这样改变你的按钮：

在此处输入图像描述

然后你可以选择一个大小与类btn-large，btn-small和btn-mini。

最后，您可以在按钮中添加一个图标（列表在此处）。

这个：

<button class="btn btn-success">
    <i class="icon-shopping-cart icon-white"></i>
    <span>Checkout</span>
</button>

给出：

在此处输入图像描述

享受新按钮的乐趣。:)

score 2 · Accepted Answer

使用 CSS 边框半径。我建议使用谷歌搜索“CSS 按钮生成器”等，并找到任意数量的按钮生成工具，您可以使用这些工具来获得正确的 css。您只需要确保元素的高度=宽度，然后相应地调整角半径。

score 1 · Accepted Answer

使用这种风格：

input[type='submit'] {
    width:100px;
    height:100px;
    border-radius:50px;
}

score 0 · Accepted Answer

您可以在 CSS 中使用border-radius，但在 IE 中不支持。

玩弄：-

border-radius: 10px 10px 10px 10px

score 0 · Accepted Answer

我建议要么使用 Jquery UI（你可以让你自己的主题） http://jqueryui.com/themeroller/

或者

CSS3 在 IE 中不起作用。

6 回答 6