Html
    Css
    Js
@import url("https://fonts.googleapis.com/css?family=Roboto:900,900i");
	body {
	background:#F7EBFE;
	width:100%;
	height:90vh;
	display:flex;
	justify-content:center;
	align-items:center;
	font-family:Roboto;
	font-style:italic;
}
.button {
	position:relative;
	overflow:hidden;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	cursor:pointer;
	padding:15px 35px;
	background:#9725F3;
	border-radius:50px;
	font-size:35px;
	text-transform:uppercase;
	letter-spacing:2px;
	color:#F3F137;
}
.button-text {
	position:relative;
}
.button-rainbow {
	width:150%;
	height:auto;
	top:10px;
	left:-25%;
	position:absolute;
	transition:1000ms transform cubic-bezier(0.25,0.46,0.45,0.94);
	transform:translateY(0) rotate(45deg);
}
.button:hover .button-rainbow {
	transform:translateY(-100%) rotate(45deg);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css彩虹按钮悬停动画

0