I needed something similar today. I wanted a button that started with text aligned to the right, but then animated the text to center on hover/focus.
Here is what I came up with. The problem I have with several of the answers I have found is that they animate "position", which is not very performant. I wanted to use only "transform". This is a lot of markup just for centering button text, but seems to work well.
body {margin: 0}
ul, li {
margin: 0;
padding: 0;
}
li {
width: 30%;
padding: 10px 0;
}
button {
width: 100%;
height: 50px;
margin: 0;
}
.center-line {
position: absolute;
width: 2px;
height: 100%;
background: lightgray;
left: 15%;
top: 0;
}
.outer {
text-align: right;
transition: 200ms transform;
}
.inner {
display: inline-block;
transition: 200ms transform;
}
button:hover .outer {
transform: translateX(-50%);
}
button:hover .inner {
transform: translateX(50%);
}
<ul>
<li>
<button>
<div class="outer">
<div class="inner">Text 1</div>
</div>
</button>
</li>
<li>
<button>
<div class="outer">
<div class="inner">Text Two</div>
</div>
</button>
</li>
<li>
<button>
<div class="outer">
<div class="inner">Text Longer Three</div>
</div>
</button>
</li>
</ul>
<span class="center-line" />