如何用css做按钮点击后发光效果怎么做

2025-05-05 21:44:34
推荐回答(1个)
回答1:

如何用css做按钮点击后发光效果怎么做?
这个问题只能用代码的形式来解答,如下:

http://www.jqueryba.com/jquery/css3buttom.html
.btn-wrap {
text-align: center;
margin: 50px;
}
.btn{
position: relative;
display: inline-block;
line-height: 25px;
padding: 5px 15px;
margin:10px;
transition: all .3s ease-out;
text-transform: uppercase;
border-radius: 5px;
border: 1px solid #1e639a;
color: #fff;
font-weight: bold;
cursor: pointer;
text-shadow:0 1px 2px rgba(0,0,0,.4);
box-shadow: inset 1px 0 0 #559ad5,inset -1px 0 0 #559ad5,inset 0 1px 0 #559ad5,inset 0 -1px 0 #559ad5,0 0 1px rgba(0,0,0,0.5);
background: #4086c2; /* Old browsers */
background: -*-linear-gradient(to bottom, #4086c2 0%,#2989d8 100%,#3378b1 100%);
}
.btn:hover {
background: #3378b1; /* Old browsers */
background: -*-linear-gradient(to bottom, #3378b1 0%,#2989d8 0%,#4086c2 100%);
}
.btn:active:after {
content: "";
display:block;
width: 2px;
height: 2px;
position:absolute;
border-radius:2px;
top:50%;
left: 50%;
margin: -1px 0 0 -1px;
z-index:2;
background: rgba(255,255,255,1);
box-shadow:0 0 10px 5px rgba(255,255,255,0.5),
0 0 20px 10px rgba(255,255,255,0.5),
0 0 30px 15px rgba(255,255,255,0.4),
0 0 40px 20px rgba(255,255,255,0.3),
0 0 50px 25px rgba(255,255,255,0.3),
0 0 60px 30px rgba(255,255,255,0.3),
0 0 70px 35px rgba(255,255,255,0.3);