自制彩虹边框按钮

html

<button class="btn">button>

css

.btn{
	width:250pt;
	height:50pt;
	border:none;
	transform:translate(0,0);
	box-shadow:0 1.25em 2.18em rgba(0,0,0,0.3);
	overflow:hidden;
	border-radius:0.31em;
	
}
.btn:before{
	content:"";
	height:100%;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	background:repeating-linear-gradient(
		to right,
		#fd004c 5.24em,
		#fe9000 10.5em,
		#fff020 15.74em,
		#3edf4b 21em,
		#3363ff 31.5em,
		#fd004c 37.5em
	);
	background-size:125em;
}
.btn:after{
	content:"猜数字";
	position:absolute;
	background-color:#1c1b29;
	height:85%;
	width:97%;
	top:7.5%;
	left:1.5%;
	border-radius:0.2em;
	color:white;
	font-family:"Poppins",sans-serif;
	font-size:1.5em;
	letter-spacing:0.3em;
	display:grid;
	font-weight:bold;
	place-items:center;
}
.btn:hover:before{
	background-position:-106.25em 0;
	transition:10s linear;
}

效果

点击会有动画效，类似波浪