CSS3一款很棒的渐变黄金色填充按钮动画

luxury golden buttons, 非常适合用于互联网金融领域（网贷和理财）的一些网站。

css3, button

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 7924
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.btn {
    display: inline-block;
    background: transparent;
    text-transform: uppercase;
    font-weight: normal;
    font-style: normal;
    font-size: 0.625rem;
    letter-spacing: 0.3em;
    color: rgba(223, 190, 106, 0.7);
    border-radius: 0;
    padding: 18px 80px 20px;
    -webkit-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
    background: -webkit-linear-gradient(180deg, rgba(223, 190, 106, 0.8), rgba(146, 111, 52, 0.8), rgba(34, 34, 34, 0), rgba(34, 34, 34, 0));
    background: linear-gradient(270deg, rgba(223, 190, 106, 0.8), rgba(146, 111, 52, 0.8), rgba(34, 34, 34, 0), rgba(34, 34, 34, 0));
    background-position: 1% 50%;
    background-size: 300% 300%;
    text-decoration: none;
    margin: 0.625rem;
    border: none;
    border: 1px solid rgba(223, 190, 106, 0.3);
}
.btn:hover {
    color: #fff;
    border: 1px solid rgba(223, 190, 106, 0);
    color: $white;
    background-position: 99% 50%;
}
body {
    background: #231f20;
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arials, sans;
}
article {
    height: 100vh;
}
div.center {
    text-align: center;
    *zoom: 1;
    width: auto;
    max-width: 800px;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
div.center:before,
div.center:after {
    content: '';
    display: table;
}
div.center:after {
    clear: both;
}

HTML

luxury golden buttons, 非常适合用于互联网金融领域（网贷和理财）的一些网站。

css3, button

编辑器支持Emmet

快捷键

luxury golden buttons, 非常适合用于互联网金融领域（网贷和理财）的一些网站。

css3, button

HTML5 CSS3很棒的一款带渐变背景色和涟漪动画的原质化风格按钮

HTML5 CSS3一组很棒的带晃动动画特效的单选按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：