这种风格的登陆按钮如何做呀?

https://img3.mukewang.com/5c6a6f5f0001151303990271.jpg

慕姐8265434
浏览 480回答 2
2回答

慕勒3428872

碰巧我有点空<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title>Title</title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; .btn{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 30px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; line-height: 30px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-border-radius: 15px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -moz-border-radius: 15px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 15px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #fff;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background:-moz-linear-gradient(top, rgba(12,134,220,1), rgba(126, 219, 250,1));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(12,134,220,1)), to(rgba(126, 219, 250,1)));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background:-o-linear-gradient(top, rgba(12,134,220,1), rgba(126, 219, 250,1));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-indent: 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-shadow: 0 0 4px rgba(0,0,0,0.3);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .btn:before{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 80px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 4px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-border-radius: 3px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -moz-border-radius: 3px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 3px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 2px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; right: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: rgba(255,255,255,.5);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body><button class="btn" >登录</button></body></html>要自适应就改成rem就完事了

神不在的星期二

找美工画一个或者直接截图这个按钮,然后添加按钮点击事件就可以做按钮用了。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript