按钮鼠标悬停高亮特效

浏览：1143次- 评论：3次- 发布时间：2023-02-23

Html

Css

* {
	margin:0;
	padding:0;
}
.first #neon-btn {
	display:flex;
	align-items:center;
	justify-content:space-around;
	height:100vh;
	background:#031628;
}
.first .btn {
	border:1px solid;
	background-color:transparent;
	text-transform:uppercase;
	font-size:14px;
	padding:10px 20px;
	font-weight:300;
}
.first .one {
	color:#4cc9f0;
}
.first .two {
	color:#f038ff;
}
.first .three {
	color:#b9e769;
}
.first .btn:hover {
	color:white;
	border:0;
}
.first .one:hover {
	background-color:#4cc9f0;
	-webkit-box-shadow:10px 10px 99px 6px rgba(76,201,240,1);
	-moz-box-shadow:10px 10px 99px 6px rgba(76,201,240,1);
	box-shadow:10px 10px 99px 6px rgba(76,201,240,1);
}
.first .two:hover {
	background-color:#f038ff;
	-webkit-box-shadow:10px 10px 99px 6px rgba(240,56,255,1);
	-moz-box-shadow:10px 10px 99px 6px rgba(240,56,255,1);
	box-shadow:10px 10px 99px 6px rgba(240,56,255,1);
}
.first .three:hover {
	background-color:#b9e769;
	-webkit-box-shadow:10px 10px 99px 6px rgba(185,231,105,1);
	-moz-box-shadow:10px 10px 99px 6px rgba(185,231,105,1);
	box-shadow:10px 10px 99px 6px rgba(185,231,105,1);
}
/* two */
        .two #draw-border {
	display:flex;
	align-items:center;
	justify-content:center;
	height:100vh;
}
.two button {
	border:0;
	background:none;
	text-transform:uppercase;
	color:#4361ee;
	font-weight:bold;
	position:relative;
	outline:none;
	padding:10px 20px;
	box-sizing:border-box;
}
.two button::before,.two button::after {
	box-sizing:inherit;
	position:absolute;
	content:'';
	border:2px solid transparent;
	width:0;
	height:0;
}
.two button::after {
	bottom:0;
	right:0;
}
.two button::before {
	top:0;
	left:0;
}
.two button:hover::before,.two button:hover::after {
	width:100%;
	height:100%;
}
.two button:hover::before {
	border-top-color:#4361ee;
	border-right-color:#4361ee;
	transition:width 0.3s ease-out,height 0.3s ease-out 0.3s;
}
.two button:hover::after {
	border-bottom-color:#4361ee;
	border-left-color:#4361ee;
	transition:border-color 0s ease-out 0.6s,width 0.3s ease-out 0.6s,height 0.3s ease-out 1s;
}
/* three */
        .three #frozen-btn {
	display:flex;
	align-items:center;
	justify-content:center;
	height:100vh;
}
.three button {
	border:0;
	margin:20px;
	text-transform:uppercase;
	font-size:20px;
	font-weight:bold;
	padding:15px 50px;
	border-radius:50px;
	color:white;
	outline:none;
	position:relative;
}
.three button:before {
	content:'';
	display:block;
	background:linear-gradient(to left,rgba(255,255,255,0) 50%,rgba(255,255,255,0.4) 50%);
	background-size:210% 100%;
	background-position:right bottom;
	height:100%;
	width:100%;
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	border-radius:50px;
	transition:all 1s;
	-webkit-transition:all 1s;
}
.three .green {
	background-image:linear-gradient(to right,#25aae1,#40e495);
	box-shadow:0 4px 15px 0 rgba(49,196,190,0.75);
}
.three .purple {
	background-image:linear-gradient(to right,53e1,#852D91);
	box-shadow:0 4px 15px 0 rgba(236,116,149,0.75);
}
.three .purple:hover:before {
	background-position:left bottom;
}
.three .green:hover:before {
	background-position:left bottom;
}
/* fourth */
        .fourth #shiny-shadow {
	display:flex;
	align-items:center;
	justify-content:center;
	height:100vh;
	background:#1c2541;
}
.fourth button {
	border:2px solid white;
	background:transparent;
	text-transform:uppercase;
	color:white;
	padding:15px 50px;
	outline:none;
	overflow:hidden;
	position:relative;
}
.fourth span {
	z-index:20;
}
.fourth button:after {
	content:'';
	display:block;
	position:absolute;
	top:-36px;
	left:-100px;
	background:white;
	width:50px;
	height:125px;
	opacity:20%;
	transform:rotate(-45deg);
}
.fourth button:hover:after {
	left:120%;
	transition:all 600ms cubic-bezier(0.3,1,0.2,1);
	-webkit-transition:all 600ms cubic-bezier(0.3,1,0.2,1);
}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3