center text with letter-spacing on hover only css [duplicate] - html

Question

This question already has answers here:
Keep width when using letter-spacing on hover
(2 answers)
Closed 2 years ago.
i try something when i hover my button. Currenttly that's my code
.btn {
border:solid 1px purple;
color:purple;
background: white;
padding:10px 15px;
text-align: center;
transition: .5s;
}
.btn:hover{
letter-spacing: 1px;
}
<button class="btn">My bouton</button>
The problem is, when i hover my button, the text expand, the button expand too on the right.
I want to make button not expand (keep original size), only text inside expand and centerized, without put a width size, because i want it as component (I would never know the size of the text.)
ALL in css only.
The only one way i've find is to add a data attribute who come over, but i don't like this way because i reapt my text 2 times.
For you it's possible only CSS ? if yes how ? Thanks a lot

Answer 1

Hide the original button text and use it inside the after/before using below CSS rules.
.btn {
border: solid 1px purple;
color: white;
background: white;
padding: 10px 15px;
text-align: center;
position: relative;
}
.btn:hover::after{
letter-spacing: 1px;
}
.btn::after{
content: 'My Button';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
color: purple;
transition: 0.5s;
}
<button class="btn">My bouton</button>

Answer 2

use absolute positioning on the text element and set it relative to the button element
edit:
.btn {
position: relative;
border: solid 1px purple;
color: purple;
background: white;
padding: 10px 15px;
text-align: center;
transition: .5s;
width: 5em;
}
.btn:hover {
letter-spacing: 1px;
}
span {
//position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
<button class="btn">
<span>My button</span>
</button>

Answer 3

Most easy solution would be to give the button a width... but you don't want that.
As an alternative, you can play with the padding-left and padding-right.
In normal state, you give it some more padding, on hover state, bring it back to 15px.
Note: changing the text length will affect the width, the padding then needs to be adjusted too...
.btn {
border:solid 1px purple;
color:purple;
background: white;
padding:10px 20px 10px 19px;
text-align: center;
transition: .5s;
}
.btn:hover{
letter-spacing: 1px;
padding-right: 15px;
padding-left: 15px;
}
<button class="btn">My bouton</button>

Answer 4

As long as the button width is determined by the text width you can only try to manipulate the padding so it fits again.
If its no problem to give the button a width depending on its parent or a fixed width you can try this:
.btn {
border:solid 1px purple;
color:purple;
background: white;
padding:10px 15px;
text-align: center;
transition: .5s;
width: 95px;
}
.btn:hover{
letter-spacing: 1px;
}
<button class="btn">My bouton</button>