减慢过渡按钮的顶部易用性

Question

我有一个悬停时会升起的按钮。过渡时间应该是 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>

知道可能是什么原因吗？

Answer 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>

减慢过渡按钮的顶部易用性

Slow down transition top ease of button

html

css

button