纯代码实现给网页增加一个下载按钮，无需任何插件
代码如下：
<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>