html中如何填充按钮颜色渐变,CSS3一款很棒的渐变黄金色填充按钮动画

CSS

语言：

CSSSCSS

确定

.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;

}