css特效组件---毛玻璃炫光按钮

最新推荐文章于 2025-03-27 18:52:55 发布

jason--slw

最新推荐文章于 2025-03-27 18:52:55 发布

阅读量535

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Jasonslw/article/details/123954592

版权

效果展示

毛玻璃炫光按钮

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>毛玻璃炫光按钮</title>
		<link rel="stylesheet" href="../css/毛玻璃炫光按钮.css">
	</head>
	<body>
		<div class="container">
			<div class="btn"><a href="">Read More</a></div>
			<div class="btn"><a href="">Read More</a></div>
			<div class="btn"><a href="">Read More</a></div>
		</div>
	</body>
</html>

css展示

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "arial black" sans-serif;
}
body{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #48006c;
}
.container{
	/* background-color: #0077AA; */
	width: 600px;
	display: flex;
	flex-wrap: wrap;/*让弹性盒子在必要的时候换行*/
	justify-content: space-around;/*在各项周围留有空白*/
}
.container .btn{
	position: relative;
	width: 155px;
	height: 50px;
	margin: 20px;
}
.container .btn a{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(255,255,255,0.05);
	box-shadow: 0 15px 35px rgba(0,0,0,0.2);
	border-top: 1px solid rgba(255,255,255,0.1);
	border-bottom: 1px solid rgba(255,255,255,0.1);
	border-radius: 30px;
	color: #fff;
	z-index: 1;
	font-weight: 400;
	letter-spacing: 1px;/*字母间距*/
	text-decoration: none;
	overflow: hidden;
	transition: 0.5;
}
.container .btn:hover a{
	letter-spacing: 3px;
}
.container .btn a::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(to left,rgba(255,255,255,0.15),transparent);
	transform:  skewX(45deg) translateX(0);
	transition: 0.5s;
}
.container .btn:hover a::before{
	transform:  skewX(45deg) translateX(200%);
}