图标按钮css特效跑马灯效果(会转会发光的按钮)

最新推荐文章于 2024-05-20 10:36:30 发布

是小许同学吖

最新推荐文章于 2024-05-20 10:36:30 发布

阅读量1.1k

点赞数 1

分类专栏： html+css+js 文章标签： css html css3 html5 定位

本文链接：https://blog.csdn.net/Missxu1895/article/details/107934864

版权

html+css+js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这种按钮比较简单，主要就是结合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);
}