CODEWITHSUNDEEP
htmlcss
U. Watt
U. Watt

Reputation: 724

animate button text back to original position

I have a button, and I'm shifting the text to the right by 15px on hover. When the cursor is removed from the button, the text snaps back to place. I'd like the text to go back to its original position smoothly, instead of snapping back to place. For that, I set the ease-in-out property, but it isn't working. How can I achieve this?

.contact-us-button {
    cursor: pointer;
    background-color: #242628;
    border-radius: 5px;
    padding: 15px 32px 16px 30px;
    font-family: 'Helvetica Neue Light';
    font-size: 18px;
    line-height: 18px;
    width: 280px;
    color: #FFFFFF;
}

.contact-us-button:hover .button-text {
    padding-left: 15px;
    transition: padding-left 0.2s ease-in-out;
}
<button class="contact-us-button">
    <span class="button-text">GET IN TOUCH</span>
</button>

Upvotes: 0

Views: 34

Answers (1)

slow
slow

Reputation: 1428

To get this working, you have to give the class .button-text this style

transition: padding-left 0.2s ease-in-out;

The final code should look like this:

.contact-us-button {
    cursor: pointer;
    background-color: #242628;
    border-radius: 5px;
    padding: 15px 32px 16px 30px;
    font-family: 'Helvetica Neue Light';
    font-size: 18px;
    line-height: 18px;
    width: 280px;
    color: #FFFFFF;
}

.button-text {
    transition: padding-left 0.2s ease-in-out;
}

.contact-us-button:hover .button-text {
    padding-left: 15px;
}
<button class="contact-us-button">
    <span class="button-text">GET IN TOUCH</span>
</button>

Upvotes: 2

Related Questions