如何增加按钮背景颜色变化的时间

Posted 2023-03-06

【中文标题】如何增加按钮背景颜色变化的时间

【英文标题】：How to increase the time of background color change of a button

【发布时间】：2022-01-16 16:38:25

【问题描述】：

我无法增加使用渐变背景的悬停效果的时间。

.headerCall
    font-family:gilroySemiBold;
    color:white;
    width: 27vh;
    height: 9vh;
    border:none;
    margin-top: 2vh;
    margin-right: 4.87vh;
    font-weight: 600;
    font-size: 2.5vh;
    line-height: 3.89vh;
    background: linear-gradient(133.95deg, #F7941D -13.98%, #EE4163 57.42%, #8A2BE2 112.06%);
    border-radius: 6.08vh;
    cursor:pointer;
    transition:  2s;

headerCall:hover
    background: transparent;
    border:0.16vh solid lightgray;

【参考方案1】：

.headerCall
    font-family:gilroySemiBold;
    color:white;
    width: 27vh;
    height: 9vh;
    border:0.16vh solid transparent;
    margin-top: 2vh;
    margin-right: 4.87vh;
    font-weight: 600;
    font-size: 2.5vh;
    line-height: 3.89vh;
    background: linear-gradient(133.95deg, #F7941D -13.98%, #EE4163 57.42%, #8A2BE2 112.06%);
    border-radius: 6.08vh;
    cursor:pointer;
    transition: all 2s ease-out;

.headerCall:hover
    transition: all 2s ease-in;
    background: red;
    border:0.16vh solid lightgray;

<button class="headerCall">here</button>

【讨论】：

问题主要是css中的类标识符^

还有一个问题！

我认为转换也不合适？

除了这个答案，我推荐一个关于使用过渡的好资源。 css-tricks.com/almanac/properties/t/transition

@darylvickerman 问题与border