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;

}

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值