如何将提交按钮的形状更改为圆形[重复]答案

【问题标题】：how to change the shape of submit button to circle [duplicate]如何将提交按钮的形状更改为圆形[重复]
【发布时间】：2012-07-26 14:23:26
【问题描述】：

可能重复：
Draw Circle using css alone

我想知道有没有什么办法可以把提交按钮的形状从矩形变成圆形？？

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

【问题讨论】：

@WesleyMurch 但该问题显示了如何创建圆形 div 区域..我的以更改提交按钮形状..
很抱歉您没有发现它有用。如果有帮助，设置提交按钮的样式非常类似于设置 div 的样式（试试看）。事实上，这两个问题的最高投票答案是相同的。我没想到您的问题实际上会被关闭，一定有人标记了它。

【解决方案1】：

使用border-radius 属性。

例子：

.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
}

【讨论】：

【解决方案2】：

您的问题已经得到解答，但我推荐您Twitter Bootstrap。

它是一个 HTML/CSS 框架，可让您轻松制作great buttons（以及其他）。

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

只有一个类 - btn - 您可以对 <button>、<input type="button"> 或 <a> 进行样式化。

这个：

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

给出：

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

btn-primary、btn-info、btn-success、btn-warning、btn-danger 和 btn-inverse。

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

然后您可以使用 btn-large、btn-small 和 btn-mini 类选择大小。

最后，您可以在按钮中添加一个图标 (the list is here)。

这个：

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

给出：

尽情享受您的新按钮吧。 :)

【讨论】：

我也在做同样的事情.. 但是按钮形状没有任何选项.. 是吗？
它提供了一个默认形状（如上图所示），但您可以随意修改它：它只是 CSS！ 如果需要，请在 border-radius: 10px 中修改 border-radius: 5px它。 :)
这根本不能回答问题。

【解决方案3】：

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

【讨论】：

【解决方案4】：

使用这种风格：

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

【讨论】：

【解决方案5】：

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

玩弄：-

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

【讨论】：

【解决方案6】：

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

或

CSS3 不能在 IE 中工作。

【讨论】：