css实现炫酷渐变边框按钮代码-html代码-BFW代码库

代码语言：html

代码描述：css实现炫酷渐变边框按钮代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
    body {
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment:fixed
}
.overlay {
	position:fixed;
	width:100%;
	height:100%;
	background:#000;
	opacity:.7;
	left:0;
	top:0
}
.rgb-border,.rgb-border-circle,.rgb-border-round,.group-btn-rgb-border,.circle-buttons {
	margin:2em auto
}
.circle-buttons {
	width:34.8em
}
footer {
	color:#fff;
	text-align:center;
	font-family:Arial,Helvetica,sans-serif;
	font-size:1.2em;
	font-weight:400;
	position:relative
}
.group-btn-rgb-border {
	background:#020024;
	background:linear-gradient(155deg,rgba(2,0,36,1) 0,rgba(255,0,0,1) 0,rgba(255,171,0,1) 12%,rgba(224,255,0,1) 24%,rgba(0,255,8,1) 36%,rgba(0,228,255,1) 48%,rgba(0,5,255,1) 60%,rgba(254,0,231,1) 72%,rgba(255,0,0,1) 84%,rgba(255,162,0,1) 96%);
	width:25.1em;
	height:4em;
	animation:gradient-anim 55s linear infinite;
	position:relative;
	font-family:Arial,Helvetica,sans-serif
}
.group-btn {
	background-color:#242424;
	background-image:linear-gradient(147deg,#000 0,#434343 74%);
	width:9.8em;
	height:2.8em;
	text-align:center;
	text-decoration:none;
	padding-top:1.8em;
	color:#fff;
	color:#fff;
	font-size:.8em;
	margin:.2em;
	display:inline-block
}
.group-btn:hover {
	background:#000
}
@keyframes gradient-anim {
	0% {
	background-position:0 0
}
50% {
	background-position:18.75em 31.25em
}
100% {
	background-position:.1em .1em
}
}@media screen and (max-width:700px) {
	.group-btn-rgb-border {
	width:8.1em;
	height:11.8em;
	padding-top:.1em
}
.group-btn {
	display:block
}
}.btn,.rgb-border::before {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%)
}
.btn,.rgb-border,.rgb-border::before {
	box-sizing:border-box
}
.rgb-border {
	background:#020024;
	background:linear-gradient(155deg,rgba(2,0,36,1) 0,rgba(255,0,0,1) 0,rgba(255,171,0,1) 12%,rgba(224,255,0,1) 24%,rgba(0,255,8,1) 36%,rgba(0,228,255,1) 48%,rgba(0,5,255,1) 60%,rgba(254,0,231,1) 72%,rgba(255,0,0,1) 84%,rgba(255,162,0,1) 96%);
	width:11em;
	height:4em;
	animation:gradient-anim 55s linear infinite;
	position:relative;
	font-family:Arial,Helvetica,sans-serif
}
.rgb-border::before {
	content:' ';
	width:100%;
	height:100%;
	background:inherit;
	position:absolute;
	filter:blur(4px)
}
.btn {
	background-color:#000;
	background-image:linear-gradient(147deg,#000 0,#434343 74%);
	width:9.8em;
	height:3.3em;
	text-align:center;
	text-decoration:none;
	padding:1.1em;
	color:#fff;
	font-size:1.1em
}
@keyframes gradient-anim {
	0% {
	background-position:0 0
}
50% {
	background-position:18.75em 31.25em
}
100% {
	background-position:.1em .1em
}
}@media screen and (max-width:500px) {
	.rgb-border {
	width:9.1em;
	height:3.1em
}
.btn {
	width:9.8em;
	height:3.3em;
	font-size:.9em
}
}@media screen and (max-height:500px) {
	.rgb-border {
	width:9.1em;
	height:3.1em
}
.btn {
	width:9.8em;
	height:3.3em;
	font-size:.9em
}
}.btn-round,.rgb-border-round::before {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%)
}
.btn-round,.rgb-border-round,.rgb-border-round::before {
	box-sizing:border-box;
	border-radius:3em
}
.rgb-border-round {
	background:#020024;
	background:linear-gradient(155deg,rgba(2,0,36,1) 0,rgba(255,0,0,1) 0,rgba(255,171,0,1) 12%,rgba(224,255,0,1) 24%,rgba(0,255,8,1) 36%,rgba(0,228,255,1) 48%,rgba(0,5,255,1) 60%,rgba(254,0,231,1) 72%,rgba(255,0,0,1) 84%,rgba(255,162,0,1) 96%);
	width:11em;
	height:4em;
	animation:gradient-anim 55s linear infinite;
	position:relative;
	font-family:Arial,Helvetica,sans-serif
}
.rgb-border-round::before {
	content:' ';
	width:100%;
	height:100%;
	background:inherit;
	position:absolute;
	filter:blur(4px)
}
.btn-round {
	background-color:#000;
	background-image:linear-gradient(147deg,#000 0,#434343 74%);
	width:9.8em;
	height:3.3em;
	text-align:center;
	text-decoration:none;
	padding:1.1em;
	color:#fff;
	font-size:1.1em
}
@keyframes gradient-anim {
	0% {
	background-position:0 0
}
50% {
	background-position:18.75em 31.25em
}
100% {
	background-position:.1em .1em
}
}@media screen and (max-width:500px) {
	.rgb-border-round {
	width:9.1em;
	height:3.1em
}
.btn-round {
	width:9.8em;
	height:3.3em;
	font-size:.9em
}
}@media screen and (max-height:500px) {
	.rgb-border-round {
	width:9.1em;
	height:3.1em
}
.btn-round {
	width:9.8em;
	height:3.3em;
	font-size:.9em
}
}.btn-circle,.rgb-border-circle::before {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%)
}
.btn-circle,.rgb-border-circle,.rgb-border-circle::before {
	border-radius:.........完整代码请登录后点击上方下载按钮下载查看