英文:
CSS Letter Spacing extends the Button to the right
问题
I've translated the non-code part of your text:
"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?"
Here is the translation:
"我正在制作一个网站，我已经添加了一个按钮，当鼠标悬停时，字母间距会稍微增加，问题是当这种情况发生时，字母宽度会增加按钮的宽度，使其从未悬停时的位置偏离。运行它并看看我是什么意思，我希望按钮变得更宽但保持其中心位置，有点像标题，我该怎么做？"
英文:
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:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
答案1
得分: 1
问题是按钮无法向左扩展，因此只能向右扩展。通过将按钮包装在宽度较大的容器中，并在容器内居中对齐它，它将在其父级内有空间来向两侧扩展。
网格解决方案
将header设置为一个网格，并指定列大小
header {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
place-items: center;
}
这会产生与按钮周围容器相同的效果，并且由于place-items: center而在其中居中对齐。
英文:
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.
答案2
得分: 0
你可以使用transform: scale();代替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>
英文:
You can use transform: scale(); instead of letter-spacing.
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<header>
<div class="buttons">
<button>Socials</button>
</div>
<div class="title">J-ak-e</div>
</header>
<h4>About me:</h2>
<!-- end snippet -->
答案3
得分: 0
这是你想要的方式。理想情况下，悬停在任何元素上都不应干扰其他元素。这是良好用户体验的方式。
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>
英文:
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.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论