CSS实例-按钮的圆角属性

2014-04-14

　　在制作表单按钮时候，为了美观，常常需要给按钮设置为圆角，效果图如下：

　　按钮代码如下：
　　.btn{
　　width: 60px;
　　border: 1px solid #1BC286;
　　padding: 5px;
　　background: #70B88F;
　　color: white;
　　cursor: pointer;
　　border-radius: 5px;
　　}

　　PS：按钮的圆角属性主要靠border-radius来实现，border-radius的值给的越大，那么按钮圆角样式越明显，虽然圆角属性实现了，但是按钮是要提交表单数据的，鼠标放上去不显示“小手”状态了，此时给按钮样式添加cursor:pointer;此时完美实现按钮圆角属性，鼠标经过小手图标。

　　文章延伸：通过

　　onmouseover="this.style.backgroundColor='#18834B';"

　　onmouseout="this.style.backgroundColor='#70B88F';"

　　实现鼠标经过按钮时背景色和离开按钮时颜色。

本文关键词：CSS实例-按钮的圆角属性圆角样式按钮属性实例