纯代码制作HTML下载按钮

纯代码制作HTML下载按钮

纯代码实现给网页增加一个下载按钮,无需任何插件

代码如下:

<style>
	*{margin:0;padding:0}
	button{
		background:none;
		border:2px solid;
		border-bottom-width:4px;
		font:inherit;
		letter-spacing:inherit;
		margin:1em;
		padding:1em 2em;
		text-decoration:inherit;
		text-transform:inherit;
		-webkit-transition:color 1s;
		transition:color 1s;
		color:#9c89f7;
		}
		.btn1:hover{
		-webkit-animation:halfone 1s forwards;
		animation:halfone 1s forwards;
		background:-webkit-radial-gradient(cricle,#9c89f7 0.2em,rgb(0,0,0,0) 0.25em) 0 0/1.25em 1.25em,-webkit-radial-gradient(cricle,#9c89f7 0.2em,rgb(0,0,0,0) 0.25em) 6.25em 6.25em/1.25em 1.25em;
		background:radial-gradient(cricle,#9c89f7 0.2em,rgb(0,0,0,0) 0.25em) 0 0/1.25em 1.25em,radial-gradient(cricle,#9c89f7 0.2em,rgb(0,0,0,0) 0.25em) 6.25em 6.25em/1.25em 1.25em;
		color:#d59a1b;
		}
		@-webkit-keyframes halfone{
		100%{
			background-size:2.375em 2.375em,0.1em 0.1em
			}
		}
		@keyframes halfone{
		100%{
			background-size:2.375em 2.375em,0.1em 0.1em
			}
		}
		.btn2{
			color:#82f6d8
		}
		.btn2:hover{
		-webkit-animation:stripes-move 0.75s infinite linear;
		        animation:stripes-move 0.75s infinite linear;
		background:-webkit-repeating-linear-gradient(45deg,#82f6d8 0,#82f6d8 0.25em, transparent 0.25em, transparent 0.5em);
		background:repeating-linear-gradient(45deg,#82f6d8 0,#82f6d8 0.25em, transparent 0.25em, transparent 0.5em);
		color:#f682a0;
		}
		@-webkit-keyframes stripes-move{
		100%{
			background-position:5em 0em
			}
		}
		@keyframes stripes-move{
		100%{
			background-position:5em 0em
			}
		}
		.btn3{
			color:#d3f169
		}
		.btn3:hover{
		-webkit-animation:sawtooth 0.35s infinite linear;
		        animation:sawtooth 0.35s infinite linear;
		background:-webkit-linear-gradient(45deg,#d3f169 0.5em, transparent 0.5em) 0 0/1em 1em,-webkit-linear-gradient(135deg,#d3f169 0.5em, transparent 0.5em) 0 0/1em 1em;
		background:linear-gradient(45deg,#d3f169 0.5em, transparent 0.5em) 0 0/1em 1em,linear-gradient(-45deg,#d3f169 0.5em, transparent 0.5em) 0 0/1em 1em;
		color:#8769f1;
		}
		@-webkit-keyframes sawtooth{
		100%{
			background-position:1em 0em
			}
		}
		@keyframes sawtooth{
		100%{
			background-position:1em 0em
			}
		}
		.btn4{
			color:#eea163
		}
		.btn4:hover{
		-webkit-animation:zigzag 1s infinite linear;
		        animation:zigzag 1s infinite linear;
		background:-webkit-linear-gradient(315deg,rgba(238,161,99,0.25) 0.5em, transparent 0.25em) -0.5em 0,
		-webkit-linear-gradient(225deg,rgba(238,161,99,0.25) 0.5em, transparent 0.25em) -0.5em 0,
		-webkit-linear-gradient(135deg,rgba(238,161,99,0.25) 0.5em, transparent 0.25em) 0 0,
		-webkit-linear-gradient(45deg,rgba(238,161,99,0.25) 0.5em, transparent 0.25em) 0 0;
		background:linear-gradient(315deg,rgba(238,161,99,0.25) 0.5em, transparent 0.25em) -0.5em 0,
		linear-gradient(225deg,rgba(238,161,99,0.25) 0.5em, transparent 0.25em) -0.5em 0,
		linear-gradient(135deg,rgba(238,161,99,0.25) 0.5em, transparent 0.25em) 0 0,
		linear-gradient(45deg,rgba(238,161,99,0.25) 0.5em, transparent 0.25em) 0 0;
		background-size:0.75em 0.75em;
		color:#63b0ee;
		}
		@-webkit-keyframes zigzag{
		100%{
			background-position:1em 0,1em 0,-0.75em 0,-0.75em 0;
			}
		}
		@keyframes zigzag{
		100%{
			background-position:1em 0,1em 0,-0.75em 0,-0.75em 0;
			}
		}
		.btn5{
			color:#7cf07f
		}
		.btn5:hover{
		-webkit-animation:blinds 0.75s linear forwards;
		        animation:blinds 0.75s linear forwards;
		background:-webkit-linear-gradient(99deg,#7cf07f 25%, transparent 25%) 0 0/0.5em 0.5em,
		-webkit-linear-gradient(99deg,#88d6f3 50%, transparent 50%) 0 0/1em 1em;
		background:linear-gradient(0deg,#7cf07f 25%, transparent 25%) 0 0/0.5em 0.5em,
		linear-gradient(0deg,#88d6f3 50%, transparent 50%) 0 0/1em 1em;
		color:#f07ced;
		}
		@-webkit-keyframes blinds{
		100%{
			background-position:0 0,0 -3em;
			background-size:0 0,1em 6em;
			}
		}
		@keyframes blinds{
		100%{
			background-position:0 0,0 -3em;
			background-size:0 0,1em 6em;
			}
		}
		.btn6{
			color:#f9879b
		}
		.btn6:hover{
		-webkit-animation:pulse 1s easy-in infinite;
		        animation:pulse 1s easy-in infinite;
		background:-webkit-radial-gradient(circle,rgba(249,135,155,0.25) 43%, rgba(0,0,0,0) 50%) 0 0/1em 1em,
		-webkit-radial-gradient(circle,rgba(249,135,155,0.25) 43%, rgba(0,0,0,0) 50%) 0.5em 0.5em/2em 2em;
		background:radial-gradient(circle,rgba(249,135,155,0.25) 43%, rgba(0,0,0,0) 50%) 0 0/1em 1em,
		radial-gradient(circle,rgba(249,135,155,0.25) 43%, rgba(0,0,0,0) 50%) 0.5em 0.5em/2em 2em;
		color:#0bdcb7;
		}
		@-webkit-keyframes pulse{
		50%{
			background-position:0.66em 0.66em,-0.33em -0.33em;
			}
		100%{
			background-position:-1.5em -1.5em,-1em -1em;
			background-size:2em 2em,1em 1em;
			}
		}
		@keyframes pulse{
		50%{
			background-position:0.66em 0.66em,-0.33em -0.33em;
			}
		100%{
			background-position:-1.5em -1.5em,-1em -1em;
			background-size:2em 2em,1em 1em;
			}
		}
</style>
</head>

<body>
   
    <a href="链接地址" target="_blank"class="http://www.songjiale.com"></button>
    <button class="songjiale">本地下载</button>

</body>
<body>
   
    <a href="链接地址" target="_blank"class="http://www.songjiale.com"></button>
    <button class="songjiale">极速下载</button>
</body>
<body>
   
    <a href="链接地址" target="_blank"class="http://www.songjiale.com"></button>
    <button class="songjiale">网盘下载</button>
</body>
</html>







   
    
    



   
    
    


   
    
    


 
356 ° 来自:PC 天津市
上一篇: 永久免费加速器QAQGame
下一篇: 随机生成手持身份证照软件
您可能还喜欢这些:

亲,沙发正空着,还不快来抢?

评论审核已开启 记住我的个人信息 回复后邮件通知我
Back to Top