css按钮悬停背景动画-html代码-BFW代码库

css按钮悬停背景动画

代码语言：html

所属分类：悬停

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root {
	--primary: 0, 0%, 100%;
	--secondary: 202, 73%, 28%;
	--c: cubic-bezier(1,.49,.16,.96);
}

body {
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	        flex-direction: column;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
	width: 100%;
	height: 100vh;
	font-family: 'Poppins', 'Helvetica', sans-serif;
	background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);	
}

.btn {
	--w: 300px;
	--h: 45px;
	position: relative;
	display: -webkit-box;
	display: flex;
	width: var(--w);
	height: var(--h);
	border: 1px solid hsl(var(--primary));
}

div {margin-bottom: 20px;}
div:last-child {margin-bottom: 0px;}

i {
	content: '';
	width: 100%;
	height: 100%;
	-webkit-transition: all .5s var(--c);
	transition: all .5s var(--c);
	background: hsl(var(--primary));
}

i:nth-child(1) {-webkit-transition-delay: .02s;transition-delay: .02s;}
i:nth-child(2) {-webkit-transition-delay: .04s;transition-delay: .04s;}
i:nth-child(3) {-webkit-transition-delay: .06s;transition-delay: .06s;}
i:nth-child(4) {-webkit-transition-delay: .08s;transition-delay: .08s;}
i:nth-child(5) {-webkit-transition-delay: .10s;transition-delay: .10s;}
i:nth-child(6) {-webkit-transition-delay: .12s;transition-delay: .12s;}
i:nth-child(7) {-webkit-transition-delay: .14s;transition-delay: .14s;}
i:nth-child(8) {-webkit-transition-delay: .16s;transition-delay: .16s;}
i:nth-child(9) {-webkit-transition-delay: .18s;transition-delay: .18s;}.........完整代码请登录后点击上方下载按钮下载查看