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

Question

  

可能重复：
  Draw Circle using css alone

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

我不想使用圆形图像解决方案。我希望按钮的所有其他特性都来自css样式。

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

现场演示：Regular circle
现场演示：Rounded shape
现场演示：Input button with text

Answer 2

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

这是一个HTML / CSS框架，可让您轻松制作great buttons（等等）。

此按钮为“crossbrowser”，表示它们与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>

给出：

享受新按钮的乐趣。 :)

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中不起作用。