动画按钮文本返回到原始位置

Question

我有一个按钮，我将文本向右移动15px。当光标从按钮上移开时，文本将恢复到原来的位置。我希望文本能够平滑地回到原来的位置，而不是快速地回到原来的位置。为此，我设置了ease-in-out属性，但它不起作用。我怎样才能做到这一点呢?

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

Answer 1

要让它工作，你必须给类.button-text这个样式

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

最后的代码应该是这样的:

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