<!DOCTYPE html>
<html>
<head>
<title>Crayon Animate</title>
<style type="text/css">
body {
background-color: #747474;
}
.yam-don-button {
width: 300px;
margin-top: 100px!important;
}
.yam-don-button {
position: relative;
display: block;
background: #fff;
border: none;
border-radius: 100px;
box-shadow: 0 24px 50px -20px rgba(0,0,0,.5);
margin: 15px auto 0;
min-width: 250px;
line-height: 60px;
font-size: 24px;
text-decoration: none;
text-align: center;
vertical-align: middle;
color: #fff;
white-space: wrap;
z-index: 2;
cursor: pointer;
}
.yam-don-heart {
position: relative;
vertical-align: top;
z-index: 1;
display: inline-block;
margin-right: 15px;
color: #fff;
font-size: 33px;
text-shadow: none;
}
.btn-sponsor-red .yam-don-heart:before {
background: linear-gradient(90deg,#f36,#61c2f0,#f441a5,#ffeb3b,#f36);
background-size: 500%;
content: "";
position: absolute;
top: 15px;
left: -3px;
right: 0;
bottom: 15px;
z-index: -1;
filter: blur(10px);
animation: crayonAnimate 28s linear infinite;
}
.yam-don-button:before {
display: block;
background: linear-gradient(90deg,#f36,#61c2f0,#f441a5,#ffeb3b,#f36);
background-size: 500%;
border-radius: 100px;
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
z-index: -1;
opacity: .8;
filter: blur(10px);
animation: crayonAnimate 28s linear infinite;
transition: all .35s;
}
.btn-sponsor-blue:before {
background: linear-gradient(90deg,#00a2e4,#a7cd6b,#00a2e4,#a7cd6b,#00a2e4);
background-size: 500%;
}
.yam-don-button:hover:before {
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
opacity: 1;
animation: crayonAnimate 8s linear infinite;
}
@keyframes crayonAnimate {
from {background-position:0}
to {background-position:500%}
}
</style>
</head>
<body>
<a href="#" class="yam-don-button btn-sponsor-blue" target="_blank">
<span class="yam-don-heart">♥</span>立即点赞
</a>
<a href="#" class="yam-don-button btn-sponsor-red" target="_blank">
<span class="yam-don-heart">♥</span>立即点赞
</a>
</body>
</html>
