css美化button

效果图

HTML代码

<div id="sendCode"><button>发送</button></div>

css代码

#sendCode{padding: 1vw;}#sendCode>button{float: right;/*设置浮动*/width: 150px;/*设置按钮宽度*/height: 35px;/*设置按钮高度*/color:white;/*字体颜色*/background-color:cornflowerblue;/*按钮背景颜色*/border-radius: 3px;/*让按钮变得圆滑一点*/border-width: 0;/*消去按钮丑的边框*/margin: 0;/*margin0*/outline: none;/*取消轮廓*/font-size: 15px;/*设置字体大小*/font-weight: lighter;/*设置字体粗细*/text-align: center;/*字体居中*/cursor: pointer;/*设置鼠标箭头手势*/}#sendCode>button:hover{transition: .8s linear;/*过渡动画*/background-color:#4B71E0;}