css实现悬浮金色渐变按钮动画效果代码-html代码-BFW代码库

css实现悬浮金色渐变按钮动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现悬浮金色渐变按钮动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html >
<head>

    <style>
        .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%;
   .........完整代码请登录后点击上方下载按钮下载查看