赛博朋克风格按钮样式

最新推荐文章于 2025-06-06 17:58:26 发布

run明

最新推荐文章于 2025-06-06 17:58:26 发布

阅读量413

点赞数 1

分类专栏： CSS 文章标签： css css3 html

原文链接：https://mp.weixin.qq.com/s/Rs-LixHdRjBr32_UxdY9bA

版权

CSS 专栏收录该内容

2 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="preconnect" type="text/css" href="https://fonts.gstatic.com"/>
		<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"/>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background-color: #f8f005;}
			button,button::after{
				width: 380px;
				height: 86px;
				font-size: 36px;
				font-family: 'Bebas Neue',cursive;
				background: linear-gradient(45deg,transparent 5%,#ff013c 5%);
				border: 0;color: #fff;
				letter-spacing: 3px;
				line-height: 88px;
				box-shadow: 6px 0px 0px #00e6f6;
				outline: transparent;
				position: relative;
				cursor: pointer;
			}
			button::after{
				content:'AVALIABLE NOW';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				background: linear-gradient(45deg,transparent 3%,#00e6f6 3%,#00e6f6 5%,#ff013c 5%);
				text-shadow: -3px -3px 0px #f8f005,3px 3px 0px #00e6f6;
				--slice-0:inset(50% 50% 50% 50%);
				--slice-1:inset(80% -6px 0 0);
				--slice-2:inset(50% -6px 30% 0);
				--slice-3:inset(10% -6px 85% 0);
				--slice-4:inset(40% -6px 43% 0);
				--slice-5:inset(80% -6px 5% 0);
				clip-path: var(--slice-0);
				transform: translate(-20px,10px);
			}
			@keyframes glitch {
			  0% {
			    clip-path: var(--slice-1);
			    transform: translate(-20px, -10px);
			  }
			  
			  10% {
			    clip-path: var(--slice-3);
			    transform: translate(10px, 10px);
			  }
			  
			  20% {
			    clip-path: var(--slice-1);
			    transform: translate(-10px, 10px);
			  }
			  
			  30% {
			    clip-path: var(--slice-3);
			    transform: translate(0px, 5px);
			  }
			  
			  40% {
			    clip-path: var(--slice-2);
			    transform: translate(-5px, 0px);
			  }
			  
			  50% {
			    clip-path: var(--slice-3);
			    transform: translate(5px, 0px);
			  }
			  
			  60% {
			    clip-path: var(--slice-4);
			    transform: translate(5px, 10px);
			  }
			  
			  70% {
			    clip-path: var(--slice-2);
			    transform: translate(-10px, 10px);
			  }
			  
			  80% {
			    clip-path: var(--slice-5);
			    transform: translate(20px, -10px);
			  }
			  
			  90% {
			    clip-path: var(--slice-1);
			    transform: translate(-10px, 0px);
			  }
			  
			  100% {
			    clip-path: var(--slice-1);
			    transform: translate(0);
			  }
			}
			button:hover::after{
				animation: glitch 1s infinite;
			}
		</style>
	</head>
	<body>
		<button type="button">AVALIABLE NOW</button>
	</body>
</html>

鼠标悬浮效果展示：