发光的button

最新推荐文章于 2023-07-15 00:00:00 发布

青柠97

最新推荐文章于 2023-07-15 00:00:00 发布

阅读量114

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/a1997bcd/article/details/118222408

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>button</title>
		<style>
			html {
				height: 100%;
			}

			body {
				background: linear-gradient(#141e30, #243b55);
			}

			.div {
				display: flex;
				justify-content: center;
				margin-top: 100px;
			}

			.shine-btn {
				position: relative;
				display: inline-block;
				padding: 10px 20px;
				color: #03e9f4;
				font-size: 16px;
				text-decoration: none;
				text-transform: uppercase;
				overflow: hidden;
				transition: .5s;
				margin-top: 40px;
				letter-spacing: 4px;
			}

			.shine-btn:hover {
				background: #03e9f4;
				color: #fff;
				border-radius: 5px;
				box-shadow: 0 0 5px #03e9f4,
					0 0 25px #03e9f4,
					0 0 50px #03e9f4,
					0 0 100px #03e9f4;
			}

			.shine-btn span {
				position: absolute;
				display: block;
			}

			.shine-btn span:nth-child(1) {
				top: 0;
				left: -100%;
				width: 100%;
				height: 2px;
				background: linear-gradient(90deg, transparent, #03e9f4);
				animation: btn-anim1 1s linear infinite;
			}

			@keyframes btn-anim1 {
				0% {
					left: -100%;
				}

				50%,
				100% {
					left: 100%;
				}
			}

			.shine-btn span:nth-child(2) {
				top: -100%;
				right: 0;
				width: 2px;
				height: 100%;
				background: linear-gradient(180deg, transparent, #03e9f4);
				animation: btn-anim2 1s linear infinite;
				animation-delay: .25s
			}

			@keyframes btn-anim2 {
				0% {
					top: -100%;
				}

				50%,
				100% {
					top: 100%;
				}
			}

			.shine-btn span:nth-child(3) {
				bottom: 0;
				right: -100%;
				width: 100%;
				height: 2px;
				background: linear-gradient(270deg, transparent, #03e9f4);
				animation: btn-anim3 1s linear infinite;
				animation-delay: .5s
			}

			@keyframes btn-anim3 {
				0% {
					right: -100%;
				}

				50%,
				100% {
					right: 100%;
				}
			}

			.shine-btn span:nth-child(4) {
				bottom: -100%;
				left: 0;
				width: 2px;
				height: 100%;
				background: linear-gradient(360deg, transparent, #03e9f4);
				animation: btn-anim4 1s linear infinite;
				animation-delay: .75s
			}

			@keyframes btn-anim4 {
				0% {
					bottom: -100%;
				}

				50%,
				100% {
					bottom: 100%;
				}
			}
		</style>
	</head>

	<body>
		<div class="div">
			<a class="shine-btn" href="#">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				Submit
			</a>
		</div>

	</body>

</html>

青柠97

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
发光的button

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>button&..
复制链接

扫一扫