JSFiddle - React, Tailwind, and code Playground
HTML
<button id="something" class='one'>Something</button>
<button id="other-button" class="other-button-one">
other button
</button>
CSS
.one {
background: blue;
padding: 10px 0px;
width: 300px;
}
.two {
background: blue;
padding: 10px 0px;
color: transparent;
width: 0;
visibility: hidden;
transition: color 50ms 0s linear, width 100ms linear, visibility 100ms 0s linear;
}
.other-button-one {
width: 100px;
padding: 10px 0px;
}
.other-button-two {
padding: 10px 0px;
width: 300px;
transition: width 0.1s linear;
}
JavaScript
(function() {
document.getElementById("other-button").onclick = function() {
if (document.getElementById("something").className == "one") {
document.getElementById("something").className = "two";
}
this.className = "other-button-two";
}
})();