center text with letter-spacing on hover only css

Question

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

A way you can go about doing this is to use jQuery / javascript. Are you open to that idea? Cause you need to calculate the width per dynamic content, thus, javascript / jQuery will be much easier with minimal code. — Gosi, Feb 24 '20 at 09:30
Precisely, with javascript I can do it, I would like, if it is possible, do it in css only — countrystores, Feb 25 '20 at 09:07
Don't think its possible with css when you have to calculate current width. If you want the answer in jquery, I can post it. I've tested it and it works in Jquery. But since its CSS only, I don't think its possible. — Gosi, Feb 26 '20 at 01:26

score 1 · Answer 1 · answered Feb 24 '20 at 09:12

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>

answered Feb 24 '20 at 09:12

Alisha

101
4

Thank you, as I said in my description, I used this method, using the data attribute, it makes me repeat my text 2 times (DRY) – countrystores Feb 25 '20 at 09:09
Yes, I think this is not possible with pure CSS. By using scale we can achieve an effect close to the above one. [Demo](https://jsfiddle.net/alishapatel/5j7fyzuq/1/) – Alisha Feb 25 '20 at 10:21
Thanks, i have thinking to use this way but , it's not exactly that designer want – countrystores Feb 25 '20 at 12:45

GreyRoofPigeon · Answer 2 · 2020-02-24T09:26:15.527

0

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>

edited Feb 24 '20 at 09:26

answered Feb 24 '20 at 08:54

GreyRoofPigeon

17,833
4
36
59

when increasing the text button width also increases. – Mehraj Khan Feb 24 '20 at 08:58
This doesn't work, when there is a longer dynamic text, the issue still exists. Try changing the text inside to *My bouton Lorem Pixel* and you can see it. – Gosi Feb 24 '20 at 08:59
@Gosi, that's why I added the **note** – GreyRoofPigeon Feb 24 '20 at 09:00
@LinkinTED So, when the content comes in dynamically, how does the padding change? You'll have to manually change the padding? – Gosi Feb 24 '20 at 09:01
Yes, in this workaround solution, you'll need to do that. Surely it isn't ideal, but I didn't find a better one – GreyRoofPigeon Feb 24 '20 at 09:03
1

@LinkinTED Then there is no different then adding *width*. The reason why he didn't want to use *width* is because he doesn't want to manually add it as the contents are dynamic. – Gosi Feb 24 '20 at 09:04
@Gosi, I'm thrilled to see your solution. When I come up with a better one, I'll surely share it. – GreyRoofPigeon Feb 24 '20 at 09:05
2

how is this centerized? – robotik Feb 24 '20 at 09:11
1

@robotik, good comment, changed the answer – GreyRoofPigeon Feb 24 '20 at 09:26
1

this will not work for any text – Temani Afif Feb 24 '20 at 10:39

score 0 · Answer 3 · edited Feb 24 '20 at 09:20

0

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>

edited Feb 24 '20 at 09:20

GreyRoofPigeon

17,833
4
36
59

answered Feb 24 '20 at 08:55

StuckWithCode

41
5

Please add an example of that. – GreyRoofPigeon Feb 24 '20 at 09:04
try the above it works but width is fixed. You can go further add a div layer and make it responsive – StuckWithCode Feb 24 '20 at 09:19
Did you try your code? I've put it in a snippet :) – GreyRoofPigeon Feb 24 '20 at 09:20
Thanks, i've try it before you show me it, probleme is, you fix a with, and i want it as component, i'll never now size of the text. – countrystores Feb 25 '20 at 09:11

score -4 · Answer 4 · answered Feb 24 '20 at 09:02

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>

The OP requested a solution without a fixed width... – GreyRoofPigeon Feb 24 '20 at 09:04 — GreyRoofPigeon, Feb 24 '20 at 09:04

center text with letter-spacing on hover only css

4 Answers4