圆角风格纯css按钮

内容时效提醒

本文最后更新于 2016-05-14,距今已约 3824 天。这是一篇较早的文章,技术细节可能已经变化,请结合当前环境验证。

<html>
<head>
<style type="text/css">
#anniu{                 /*ID按钮*/ 
width:10em;/*设置宽度为10em*/ 
text-align:center;/*设置文本居中*/ 
background-color:#2D3642;/*设置颜色*/ 
margin-bottom:1em;/*设置按钮下边距*/ 
margin-top:1em;/*设置按钮上边距*/ 
border-radius: 1em;/*设置四周圆角*/ 
color:#fff;/*字体颜色*/ 
line-height:200%;/*设置文字行高为2倍*/ 
}
</style>
</head>

<body>

<button  id="anniu">按钮效果</button>

</body>
</html>