渐变的按钮的 | 码农工具

​x
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
 
 
</head>
<body>
<a class="et-gallery-button et-gallery-button--large et-gallery-button--primary et-gallery-button--round et-gallery-button--animated" target="_blank" href="#">焦点新闻</a>
​
</body>
</html>
​
</body>
</html>

HTML

xxxxxxxxxx
 
@-webkit-keyframes divi-button {
    0% {
        background: #7E3BD0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    33% {
        background: #c73bd0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    40% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    47% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    66% {
        background: #3bd0c9;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    100% {
        background: #7E3BD0
    }
}
@keyframes divi-button {
    0% {
        background: #7E3BD0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    33% {
        background: #c73bd0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    40% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    47% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    66% {
        background: #3bd0c9;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    100% {
        background: #7E3BD0
    }
}
.et-gallery-button--animated {
    -webkit-animation: divi-button 6s ease infinite;
    animation: divi-button 6s ease infinite
}
.et-gallery-video:hover .et-gallery-video__button {
    background: #ba4cff;
    width: 160px;
    height: 90px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .5)
}
.et-gallery-video:hover .et-gallery-video__button:before {
    border-left: 10px solid #fff
}
.et-gallery-video__button,
.et-gallery-video__button:before {
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}
​
​
text-decoration: none;      /*去掉下划线*/

CSS