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-.........完整代码请登录后点击上方下载按钮下载查看

网友评论0