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

Question

这个问题在这里已经有了答案:

已关闭 7年前.

可能的重复:
单独使用css绘制圆圈

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

我不想使用圆形剪切图像解决方案。 我想从css样式中获得按钮的所有其他特性。

Answer 1

你的问题已经回答了，但我推荐你 Twitter引导.

它是一个HTML/CSS框架，它允许你 伟大的按钮 （除其他外）容易。

这个按钮是"交叉浏览器"，这意味着它们与Internetexplorer兼容。

只有一个班 - 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.

最后，您可以添加一个图标（名单在这里）在你的按钮。

这:

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

给出了:

有乐趣与您的新按钮。 :)

Answer 2

使用方法 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
}

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

Answer 3

使用CSS边框半径。我会建议谷歌搜索"CSS按钮生成器"或类似的，并找到任何数量的按钮生成工具，你可以玩，以获得正确的css。您只需要确保元素的高度=宽度，然后相应地调整角半径。

Answer 4

使用此样式:

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

Answer 5

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

到处玩:-

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

Answer 6

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

或

CSS3 http://webdesignerwall.com/tutorials/css3-gradient-buttons

CSS3在IE中不起作用。