下载按钮动态效果-html代码-BFW代码库

下载按钮动态效果

代码语言：html

代码描述：下载按钮动态效果

代码标签：效果

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


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

<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Hind&amp;display=swap'>
<style>
* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--dur: 3s;
	--arrowA: polygon(33% 0%,67% 0%,67% 60%,100% 60%,50% 100%,0% 60%,33% 60%);
	--arrowB: polygon(0% 37.5%,100% 37.5%,100% 62.5%,100% 62.5%,50% 62.5%,0% 62.5%,0% 62.5%);
	font-size: calc(20px + (40 - 20)*(100vw - 320px)/(2560 - 320));
}
body, button {
	display: flex;
	font: 1em/1.5 Hind, sans-serif;
}
body {
	background: #e3e4e8;
	height: 100vh;
	overflow: hidden;
}
button {
	background: #255ff4;
	border-radius: 0.2em;
	color: #fff;
	cursor: pointer;
	display: flex;
	margin: auto;
	padding: 0.5em 1em;
	position: relative;
	transition: background 0.15s linear;
	width: 10.5em;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}
button:focus {
	outline: transparent;
}
button::-moz-focus-inner {
	border: 0;
}
button:not(:disabled):focus, button:not(:disabled):hover {
	bac.........完整代码请登录后点击上方下载按钮下载查看