Slow down transition top ease of button

Question

I have a button that goes up when hovered. The transition time is supposed to be 1 second but it's not working. Here is the code:

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

Any idea what the cause could be?

Does this answer your question? [CSS Transition doesn't work with top, bottom, left, right](https://stackoverflow.com/questions/20383393/css-transition-doesnt-work-with-top-bottom-left-right) — doğukan, May 05 '21 at 21:07

score 2 · Accepted Answer · answered May 05 '21 at 21:12

If you need a transition from something to anything... first you need to give the "something" the transition property. So just add top:0 to the origin. like this:

<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

1 Answers1