手机按钮css样式

在现代社会，手机已经成为人们日常生活中必不可少的一部分，而手机的使用离不开各种不同的按钮，比如顶部导航栏、底部工具栏、输入框等。如何对这些按钮进行美化？CSS样式就派上了用场。

.button {
display: inline-block；padding: 10px 20px；background-color: #42a5f5；color: #fff；font-size: 16px；border-radius: 5px；box-shadow: 0 2px 5px rgba(0,0,0,0.2)；}
.button:hover {
background-color: #64b5f6；box-shadow: 0 3px 7px rgba(0,0,0,0.3)；}
.button:active {
background-color: #2196f3；box-shadow: none；transform: translateY(2px)；}
    

上面的代码对一个普通按钮进行了样式设置。其中，display: inline-block；使按钮可以像文字一样进行排列，padding: 10px 20px；使按钮内容与边框之间有一定的间距，background-color: #42a5f5；color: #fff；设置了按钮的背景颜色以及字体颜色，font-size: 16px；调整了字体大小，border-radius: 5px；让按钮的圆角看起来更加圆润。

在按钮被鼠标悬停（:hover）时，背景色会变为淡蓝色，并有一定的阴影效果。而当按钮被按下（:active）时，背景色会变成更深的蓝色，并移动2px的距离，给用户一个反馈。

这只是对一个普通按钮样式的简单设置，实际上，想要实现更加复杂的效果，比如渐变色、边框动画等，都可以通过CSS样式来实现。完美的按钮样式可以提升用户对产品的体验感，值得我们花费更多的精力去设计。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！