Html 如何将提交按钮的形状更改为圆形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11671429/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to change the shape of submit button to circle
提问by vivek_jonam
Possible Duplicate:
Draw Circle using css alone
可能的重复：
单独使用 css 绘制圆
I would like to know if there is any way to change the shape of the submit button from rectangle to circular shape??
我想知道是否有任何方法可以将提交按钮的形状从矩形更改为圆形？
I dont want to use an circular shapped image solution.I want the all other characteristics of the button as from the css style.
我不想使用圆形的图像解决方案。我想要按钮的所有其他特征来自 css 样式。
回答by Nikola K.
Use border-radiusproperty.
使用border-radius财产。
Example:
例子：
.button {
width: 100px;
height: 100px;
background-color: #000;
border: solid 1px #000;
border-radius: 50%
}
The above example will give you a regular circle.
If you want just a little rounded shape, try this:
上面的例子会给你一个规则的圆圈。
如果你只想要一点圆润的形状，试试这个：
.button {
width: 100px;
height: 30px;
background-color: #000;
border: solid 1px #000;
border-radius: 5px
}
Live demo: Regular circle
Live demo: Rounded shape
Live demo: Input button with text
回答by GG.
Your question is already answered but I recommend you Twitter Bootstrap.
您的问题已经得到解答，但我建议您使用Twitter Bootstrap。
It is a HTML/CSS framework which allows you make great buttons(among others) easily.
它是一个 HTML/CSS 框架，可让您轻松制作出色的按钮（以及其他按钮）。
This buttons are "crossbrowser" which means they are compatible with Internet Explorer.
此按钮是“跨浏览器”按钮，这意味着它们与 Internet Explorer 兼容。
With only one class - btn- you can stylize a <button>, <input type="button">or <a>.
只有一个类 -btn您可以风格化<button>,<input type="button">或<a>。
This :
这个 ：
<button class="btn"></button>
Gives that:
给出：
You also can customize your button quickly with an optional class :
您还可以使用可选类快速自定义按钮：
btn-primary, btn-info, btn-success, btn-warning, btn-dangerand btn-inverse.
btn-primary，btn-info，btn-success，btn-warning，btn-danger和btn-inverse。
This classes transform your button like that :
这个类像这样转换你的按钮：
Then you can choose a size with the classes btn-large, btn-smalland btn-mini.
然后你可以选择一个带有类的大小btn-large，btn-small和btn-mini。
Finally, you can add an icon (the list is here) in your button.
最后，您可以在按钮中添加一个图标（列表在这里）。
This:
这个：
<button class="btn btn-success">
<i class="icon-shopping-cart icon-white"></i>
<span>Checkout</span>
</button>
Gives that:
给出：
Have fun with your new buttons. :)
享受新按钮带来的乐趣。 :)
回答by Mike Brant
Use CSS border radius. I would recommend googling 'CSS button generator' or such and finding any number of button generating tools that you can play around with to get the css right. You would just need to make sure the element's height=width and then adjust the corner radii accordingly.
使用 CSS 边框半径。我建议使用谷歌搜索“CSS 按钮生成器”等，并找到任意数量的按钮生成工具，您可以使用这些工具来获得正确的 css。您只需要确保元素的高度=宽度，然后相应地调整角半径。
回答by Mesh
Use this style:
使用这种风格：
input[type='submit'] {
width:100px;
height:100px;
border-radius:50px;
}?
回答by james31rock
I would suggest to either use the Jquery UI (you can make you own theme) http://jqueryui.com/themeroller/
我建议要么使用 Jquery UI（你可以让你自己的主题） http://jqueryui.com/themeroller/
or
或者
CSS3 http://webdesignerwall.com/tutorials/css3-gradient-buttons
CSS3 http://webdesignerwall.com/tutorials/css3-gradient-buttons
CSS3 will not work in IE.
CSS3 在 IE 中不起作用。
回答by zigoHymano
You can use border-radius in your CSS but it won't be supported in IE.
您可以在 CSS 中使用 border-radius，但 IE 不支持它。
Play around with:-
玩弄：-
border-radius: 10px 10px 10px 10px
