图标按钮css特效(会转会发光的按钮)
程序员文章站
2022-06-09 17:07:26
...
这种按钮比较简单，主要就是结合css3伪类选择器before和after以及定位实现的，阴影是通过hover效果划过实现的
主要效果为：
主要代码为：
html代码：
<body>
<a href="#">按钮1</a>
<a href="#">按钮1</a>
<a href="#">按钮1</a>
</body>
css代码：
body{
display:flex;
flex-direction:column;
align-items:center;
background:#14213d;
min-height:100vh;
}
a{
position:relative;
padding:10px 30px;
margin:45px 0;
color:#b7a3e0;
text-decoration:none;
font-size:20px;
transition:0.5s;
overflow:hidden;
-webkit-box-reflect: below 1px linear-gradient(transparent,#0003);
}
a:hover{
background:#b7a3e0;
color:#111;
box-shadow:0 0 50px #b7a3e0;
transition-delay:0.5s;
}
a::before{
content: '';
position:absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
border-top: 2px solid #B7A3E0;
border-right: 2px solid #B7A3E0;
transition: 0.5s;
transition-delay: 0.25s;
}
a:hover::before{
width: 100%;
height: 100%;
transition-delay: 0s;
}
a::after{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 10px;
height: 10px;
border-bottom: 2px solid #B7A3E0;
border-left: 2px solid #B7A3E0;
transition: 0.5s;
transition-delay: 0.25s;
}
a:hover::after{
width: 100%;
height: 100%;
transition-delay: 0s;
}
a:nth-child(1){
filter: hue-rotate(100deg); //css滤镜
}
a:nth-child(3){
filter: hue-rotate(200deg);
}
写完效果已经实现了，欧耶！