How can I slow down a text on hover? - html

Question

I'm trying to make a button where a text appears before another text only on hover. I achieved that but can't put any delay on it.
See how fast the word "let's" appears. Need to slow that down.
.btn {
width: 100px;
height: 100px;
border: none;
background-color: mediumseagreen;
transition: width 0.5s ease;
}
.btn:hover {
width: 200px;
}
.btn:hover::before {
content: "Let's ";
}
<button class="btn">
Go
</button>
I tried to use this answer switching out link text on hover - transition, but it is actually replacing the original text no?

Answer 1

You can make the text present initially and create a transition of width for example:
.btn {
width: 100px;
height: 100px;
border: none;
background-color: mediumseagreen;
transition: width 0.5s ease;
}
.btn:hover {
width: 200px;
}
.btn::before {
display:inline-block;
vertical-align:text-bottom;
content: "Let's ";
max-width:0px;
white-space:nowrap;
overflow:hidden;
transition:1s;
}
.btn:hover::before {
max-width:50px;
}
<button class="btn">
Go
</button>

Answer 2

Try to use transition-delay with opacity
.btn {
width: 100px;
height: 100px;
border: none;
background-color: mediumseagreen;
transition: width 0.5s ease;
}
.btn:hover {
width: 200px;
}
.btn::before {
opacity: 0;
content: "Let's ";
transition: all .3s linear 0s;
position: absolute;
transform: translateX(-110%);
}
.btn:hover::before {
transition: all .5s linear .3s;
opacity: 1;
}
<button class="btn">Go</button>

Answer 3

you can achieve that by adding a delay to the transition?
.btn {
transition-delay: 2s;
}