css制作网页酷炫按钮
程序员文章站
2022-04-19 11:14:21
...
今天偶然看到一位大佬的文章，觉得很有意思就跟着实操了一遍，结果也挺让人高兴的，当然，独乐乐不如众乐乐，现在我就分享给大家哈！
css制作网页酷炫按钮
当然啦，源代码也会给大家的，一起学习一起进步！！！
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="2.css">
<title>css按钮特效</title>
</head>
<body>
<a href="#">Button</a>
<a href="#">Button</a>
<a href="#">Button</a>
</body>
</html>
css代码：
*{
margin:0;
padding: 0;
font-family: '微软雅黑',sana-serif;
box-sizing:border-box;
}
body{
display:flex;
justify-content: center;
align-items: center;
background:#000;
min-height: 100vh;
}
a{
position: relative;
padding: 10px 30px;
margin:0 45px;
color: #21ebff;
text-decoration: none;
font-size: 20px;
text-transform: uppercase;/*定义仅为大写*/
transition: 0.5s;/*样式0.5秒缓动*/
overflow: hidden;
-webkit-box-reflect:below 1px linear-gradient(transparent,#0003);
}
a:hover{
background:#21ebff;
color:#111;
box-shadow: 0 0 50px #21ebff;/*依次为从原点向x轴长度、向y轴长度、阴影的模糊度、阴影颜色*/
transition-delay: 0.5s;
}
a:nth-child(1){
filter:hue-rotate(115deg);
}
a:nth-child(3){
filter:hue-rotate(270deg);
}
a::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
border-top: 2px solid #21ebff;
border-left:2px solid #21ebff;
transition:0.5s;
transition-delay: 0.5s
}
a:hover::before{
width:100%;
height:100%;
transition-delay: 0s;
}
a::after{
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 10px;
height: 10px;
border-bottom: 2px solid #21ebff;
border-right: 2px solid #21ebff;
transition:0.5s;
transition-delay: 0.5s;
}
a:hover::after{
width: 100%;
height: 100%;
transition-delay: 0s;
}
好啦，今天就先分享这么多，吃饭吃饭~~~
上一篇： openMP学习笔记