How can I make a button element with a .hover property trigger the hover animation as soon as the page loads? I want to apply a class to the button when the page is mounted and then remove it later. What is the best approach for this?
I considered using a setTimeout function, but I am having trouble implementing it correctly. My code is inspired by this example on CodePen: https://codepen.io/lucasfads/pen/QWwjGjv
<a href="#" class="button" id="specialButton">
<span class="icon"></span>
<span class="text">Hakuna Matata</span>
</a>
mounted() {
document.getElementById("specialButton").classList.add("expanded");
setTimeout(() => {
document.getElementById("specialButton").classList.remove("expanded");
}, 3000);
}
.button {
background-color: #099;
color: white;
text-decoration: none;
border-radius: 60px;
height: 32px;
display: inline-flex;
align-items: center;
overflow:hidden;
width: auto;
max-width: 32px;
transition: max-width 0.5s;
}
.button:hover,
.button .expanded {
max-width: 300px;
}
.icon {
font-family: "Font Awesome 5 Free";
font-size: 16px;
margin-right: 15px;
padding: 0px 8px;
display: flex;
align-items: center;
}
.text {
white-space: nowrap;
padding-right: 15px;
}