前端特效-霓虹灯按钮

半年前看到了一个炫酷的前端特效，忘了在哪看的了但是觉得很好看，今天发在这给大家康康。QWQ

这个是我做好的预览图

前端小特效-霓虹灯按钮预览

按钮的html很简单。四个span用来做环绕的特效，href用来链接下面用来显示。套一个a标签就完成了。

	<a href="#">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		扁呱RICHAR
	</a>

css对按钮来说才是重头戏。

body部分就是一些基础设置。将margin和padding归零。顺便设置一下背景颜色。将各元素居中。

body{
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background:#031321;
	font-family: consolas;
}

a标签的整体样式.主要是为下面的盒子阴影变化做铺垫。设置一下按钮内字体的样式。

a{
	position: relative;
	display: inline-block;
	padding: 15px 30px;
	color: #2196f3；
	text-transform:uppercase;
	letter-spacing: 4px;
	text-decoration: none;
	font-size: 24px;
	overflow: hidden;
	transition: 2s;

}

a标签扩散阴影效果。其实就是三个盒子阴影在transition属性下的变换.

a:hover{
	color: #255784;
	background:#2196f3;
	box-shadow: 0 0 10px #2196f3,0 0 40px #2196f3,0 0 80px #2196f3;
	transition-delay:1s;
}

下面就是我们的彩条环绕特效。说白了就是span来的四个渐变色彩的长方形左右/上下移动形成的视觉感。只要用动画控制这些彩条的移动，延迟，就可以了。让每个彩条呆在-100%的位置使其隐藏，当鼠标移在按钮上时就用hover属性设置彩条移动到100%就可以了。四个彩条操作相同。

a span:nth-child(1){
	top: 0;
	left: -100%;
	width: 100%;
	height: 2px;
	background:linear-gradient(90deg,transparent,#2196f3);
}

a:hover span:nth-child(1){
	left: 100%;
	transition: 1s;
}

a span:nth-child(3){
	bottom: 0;
	right: -100%;
	width: 100%;
	height: 2px;
	background:linear-gradient(270deg,transparent,#2196f3);
}

a:hover span:nth-child(3){
	right: 100%;
	transition: 1s;
	transition-delay: 0.5s;
}

a span:nth-child(2){
	right: 0;
	top: -100%;
	width: 2px;
	height: 100%;
	background:linear-gradient(180deg,transparent,#2196f3);
}

a:hover span:nth-child(2){
	top: 100%;
	transition: 1s;
	transition-delay: 0.25s;
}

a span:nth-child(4){
	left: 0;
	bottom: -100%;
	width: 2px;
	height: 100%;
	background:linear-gradient(360deg,transparent,#2196f3);
}

a:hover span:nth-child(4){
	bottom: 100%;
	transition: 1s;
	transition-delay: 0.75s; 
}

下面是css所有代码综合：

body{
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background:#031321;
	font-family: consolas;
}

a{
	position: relative;
	display: inline-block;
	padding: 15px 30px;
	color: #2196f3；
	text-transform:uppercase;
	letter-spacing: 4px;
	text-decoration: none;
	font-size: 24px;
	overflow: hidden;
	transition: 2s;

}

a:hover{
	color: #255784;
	background:#2196f3;
	box-shadow: 0 0 10px #2196f3,0 0 40px #2196f3,0 0 80px #2196f3;
	transition-delay:1s;
}

a span{
	position: absolute;
	display: block;
}

a span:nth-child(1){
	top: 0;
	left: -100%;
	width: 100%;
	height: 2px;
	background:linear-gradient(90deg,transparent,#2196f3);
}

a:hover span:nth-child(1){
	left: 100%;
	transition: 1s;
}

a span:nth-child(3){
	bottom: 0;
	right: -100%;
	width: 100%;
	height: 2px;
	background:linear-gradient(270deg,transparent,#2196f3);
}

a:hover span:nth-child(3){
	right: 100%;
	transition: 1s;
	transition-delay: 0.5s;
}

a span:nth-child(2){
	right: 0;
	top: -100%;
	width: 2px;
	height: 100%;
	background:linear-gradient(180deg,transparent,#2196f3);
}

a:hover span:nth-child(2){
	top: 100%;
	transition: 1s;
	transition-delay: 0.25s;
}

a span:nth-child(4){
	left: 0;
	bottom: -100%;
	width: 2px;
	height: 100%;
	background:linear-gradient(360deg,transparent,#2196f3);
}

a:hover span:nth-child(4){
	bottom: 100%;
	transition: 1s;
	transition-delay: 0.75s; 
}

简短但是炫酷的按钮特效就这样完成了.QWQ