猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

如图，button按钮，当鼠标覆盖或者点击的时候，如何用css让她有悬浮、阴影、发光的感觉？

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

千巷猫影
浏览 1533回答 1
1回答

交互式爱情

给你写了个小例子，直接复制过去就能看了~<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title>Document</title>&nbsp; &nbsp; <style type="text/css">&nbsp; &nbsp; &nbsp; &nbsp; .myBtn{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 80px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 36px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color:#20A0FF;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: white;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*渐变效果,可以删掉这句话试试*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition:all 0.8s;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .myBtn:hover{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*鼠标悬浮效果*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*阴影*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-shadow: 5px 5px 5px grey;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*发光*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #58B7FF;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body>&nbsp; &nbsp; <button class="myBtn">举个栗子</button></body></html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript