Html - CSS Letter Spacing extends the Button to the right

Jake
June 13, 2023
283 views
2 votes
3 Answers

I’m making a website and I’ve added a button, when hovered the letter spacing will increase slightly, the issue is that when this happens, the letter width increases the width of the button to the right, decentering it from where it was when not hovered.

Run it and see what I mean, I would like the button to get wider but keep its center position, kind of like the title, how can I do that?

Code:

header {
  background: rgb(53,65,83);
  margin:-8px;
  padding: 10px;
  font-weight: 600;
  color:aliceblue;
  letter-spacing: 1cap;
  align-content: center;
}

body {
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  background-color: rgb(240, 241, 248);
}

button {
  margin-left:20px;
  font-weight: 500;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  border-radius: 4px;
  color: white;
  background-color: rgb(42, 43, 54);
  transition-duration: 0.4s;
  border: 1px solid rgb(42, 43, 54);
  float: left;
}
button:hover {
  letter-spacing: 2px;
  font-weight: 700;
  background-color: rgb(184, 186, 203);
  color: rgb(42, 43, 54);
}
button:active {
  scale: 90%;
}

.buttons {
  align-content: center;
}

h4 {
  width: fit-content;
  padding: 5px;
  border-radius: 4px;
  box-shadow: -2px 2px 5px rgb(138, 138, 138);
  
  transform: translateY(0px);
  border: 3px double  rgb(153, 156, 181);
  background-color: rgb(238, 238, 238);
  transition: transform 0.4s, border 0.4s, background-color 0.4s;
}
h4:hover {
  transform: translateY(4px);
  border: 3px double rgb(111, 112, 126);
  transition: transform 0.4s, border 0.4s, 0.4s;
}
h4::selection {
  color: white;
  background-color: black;
}
.title {
  text-align: center;
  width: fit-content;
  user-select: none;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0px;
  transition: letter-spacing 0.2s;
}
.title:hover {
  letter-spacing: 5px;
  transition: letter-spacing 0.2s;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>J-ak-e</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <header>
    <div class="buttons">
      <button>Socials</button>
    </div>
    <div class="title">J-ak-e</div>
  </header>
  <h4>About me:</h2>
</body>

</html>

Tags: css html

Answers

- SupreetT
- June 9, 2023 at 7:53 am
- 0 votes
0
The issue is that the button doesn’t have space to grow on the left, so it only grows to the right. By wrapping the button in a container of large width, and centering it within the container, it’ll have space inside it’s parent to grow to both sides.

Grid Solution
Make the header a grid, with specified column sizes
```
header {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    place-items: center;
}
```
This gives the same effect as a container around the button, and is centered inside of it due to place-items: center.
Login or Signup to reply.

You can use transform: scale(); instead of letter-spacing.

header {
  background: rgb(53,65,83);
  margin:-8px;
  padding: 10px;
  font-weight: 600;
  color:aliceblue;
  letter-spacing: 1cap;
  align-content: center;
}

body {
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  background-color: rgb(240, 241, 248);
}

button {
  margin-left:20px;
  font-weight: 500;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  border-radius: 4px;
  color: white;
  background-color: rgb(42, 43, 54);
  transition-duration: 0.4s;
  border: 1px solid rgb(42, 43, 54);
  float: left;
}
button:hover {
  /* letter-spacing: 2px; */
  transform: scale(1.2); 
  font-weight: 700;
  background-color: rgb(184, 186, 203);
  color: rgb(42, 43, 54);
}
button:active {
  scale: 90%;
}

.buttons {
  align-content: center;
}

h4 {
  width: fit-content;
  padding: 5px;
  border-radius: 4px;
  box-shadow: -2px 2px 5px rgb(138, 138, 138);
  
  transform: translateY(0px);
  border: 3px double  rgb(153, 156, 181);
  background-color: rgb(238, 238, 238);
  transition: transform 0.4s, border 0.4s, background-color 0.4s;
}
h4:hover {
  transform: translateY(4px);
  border: 3px double rgb(111, 112, 126);
  transition: transform 0.4s, border 0.4s, 0.4s;
}
h4::selection {
  color: white;
  background-color: black;
}
.title {
  text-align: center;
  width: fit-content;
  user-select: none;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0px;
  transition: letter-spacing 0.2s;
}
.title:hover {
  letter-spacing: 5px;
  transition: letter-spacing 0.2s;
}

<header>
    <div class="buttons">
        <button>Socials</button>
    </div>
    <div class="title">J-ak-e</div>
    </header>
<h4>About me:</h2>

I think this is how you are trying to get to. Ideally, hovering on any element should not disturb the other elements. That is the way to good UX.

header {
  background: rgb(53, 65, 83);
  margin: -8px;
  padding: 10px;
  font-weight: 600;
  color: aliceblue;
  letter-spacing: 1cap;
  align-content: center;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: rgb(240, 241, 248);
}

button {
  margin-left: 20px;
  font-weight: 500;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  border-radius: 4px;
  color: white;
  background-color: rgb(42, 43, 54);
  transition-duration: 0.4s;
  border: 1px solid rgb(42, 43, 54);
  float: left;
  position: relative;
}

button:hover,
button::after {
  letter-spacing: 2px;
  font-weight: 700;
  background-color: rgb(184, 186, 203);
  color: rgb(42, 43, 54);
}

button::after {
  content: attr(data-title);
  color: transparent;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
}

button::before {
  content: attr(data-title);
  position: absolute;
  inset: 0;
  margin: auto;
}

button:active {
  scale: 90%;
}

.buttons {
  align-content: center;
}

h4 {
  width: fit-content;
  padding: 5px;
  border-radius: 4px;
  box-shadow: -2px 2px 5px rgb(138, 138, 138);
  transform: translateY(0px);
  border: 3px double rgb(153, 156, 181);
  background-color: rgb(238, 238, 238);
  transition: transform 0.4s, border 0.4s, background-color 0.4s;
}

h4:hover {
  transform: translateY(4px);
  border: 3px double rgb(111, 112, 126);
  transition: transform 0.4s, border 0.4s, 0.4s;
}

h4::selection {
  color: white;
  background-color: black;
}

.title {
  text-align: center;
  width: fit-content;
  user-select: none;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0px;
  transition: letter-spacing 0.2s;
}

.title:hover {
  letter-spacing: 5px;
  transition: letter-spacing 0.2s;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>J-ak-e</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <header>
    <div class="buttons">
      <button data-title="Socials"></button>
    </div>
    <div class="title">J-ak-e</div>
  </header>
  <h4>About me:</h2>
</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – CSS Letter Spacing extends the Button to the right

Answers