放慢转换顶部的按钮轻松答案

【问题标题】：Slow down transition top ease of button放慢转换顶部的按钮轻松
【发布时间】：2021-07-28 05:07:14
【问题描述】：

我有一个在悬停时会上升的按钮。过渡时间应该是 1 秒，但它不起作用。代码如下：

<style>
#talk-to-us {
    padding: 10px!important; 
    height: 43px!important;
    width: 148px!important;
    background-color: #0ee9f5!important;
    display: inline-auto!important;
    margin-right: 5px;
    position: relative;
    transition: top ease 1.0s; /*this is not working*/
}
#talk-to-us:hover {
    top: -10px;
    text-decoration:underline;
}

#link {
    color: white!important;
    font-size: 14px!important; 
    padding: 10px!important;
}
</style>

<button id="talk-to-us">
    <b>
        <a id="link" href="#">TALK TO US!</a>
    </b>
</button>

知道可能是什么原因吗？

【问题讨论】：

这能回答你的问题吗？ CSS Transition doesn't work with top, bottom, left, right

标签： html css button

【解决方案1】：

如果您需要从某物到某物的过渡...首先您需要为“某物”赋予过渡属性。所以只需将top:0 添加到原点即可。像这样：

<style>
#talk-to-us {
    padding: 10px!important; 
    height: 43px!important;
    width: 148px!important;
    background-color: #0ee9f5!important;
    display: inline-auto!important;
    margin-right: 5px;
    position: relative;
    transition: top ease 1.0s; /*this is not working*/
    top:0;
}
#talk-to-us:hover {
    top: -10px;
    text-decoration:underline;
}

#link {
    color: white!important;
    font-size: 14px!important; 
    padding: 10px!important;
}
</style>

<button id="talk-to-us">
    <b>
        <a id="link" href="#">TALK TO US!</a>
    </b>
</button>

【讨论】：