在悬停时使用字母间距时保持宽度
Keep width when using letter-spacing on hover
我有一些基本的按钮样式,在 :hover
上我添加了 letter-spacing
属性:
.btn {
display: inline-block;
text-align: center;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
border-radius: 0.25rem;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-primary {
background-color: #8065F1;
color: #FFFFFF;
}
.btn-large {
border-radius: 32px;
box-shadow: 0 2px 80px 0 rgba(74, 74, 74, 0.23);
padding: 0.25rem 3rem;
font-size: 1.5rem;
text-transform: uppercase;
}
.btn:hover {
letter-spacing: 4px;
}
<button type="button" class="btn btn-primary btn-large">Lorem</button>
有没有办法让width
不展开?喜欢添加 min/max-width
?但是问题是 button
元素可以包含不同的字符串长度:
.btn {
display: inline-block;
text-align: center;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
box-shadow: 0 2px 80px 0 rgba($grey, 0.23);
font-size: 1rem;
border-radius: 0.25rem;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-primary {
background-color: #8065F1;
color: #FFFFFF;
}
.btn-large {
border-radius: 32px;
-webkit-box-shadow: 0 2px 80px 0 rgba(74, 74, 74, 0.23);
box-shadow: 0 2px 80px 0 rgba(74, 74, 74, 0.23);
padding: 0.25rem 3rem;
font-size: 1.5rem;
text-transform: uppercase;
min-width: 240px;
}
.btn:hover {
letter-spacing: 4px;
}
<p>I need this "effect" (I added some min-width):</p>
<button type="button" class="btn btn-primary btn-large">Lorem</button>
<p>However it won't work for larger strings</p>
<button type="button" class="btn btn-primary btn-large">Lorem Ipsum</button><br><br>
<button type="button" class="btn btn-primary btn-large">Lorem Ipsum Dolor</button>
我知道我可以使用 JS 并将固定宽度的元素附加到它,但是我正在寻找 CSS 解决方案 - 如果有的话?
一个近似的想法是复制文本,考虑一个隐藏的已经有 letter-spacing
的文本,另一个在顶部的你动画填充已经由隐藏定义的 space文字:
这里有一个让文本颜色与背景颜色相同的想法:
.btn {
display: inline-block;
text-align: center;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
border-radius: 0.25rem;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom:10px;
}
.btn-primary {
background-color: #8065F1;
color: #FFFFFF;
}
.btn-large {
border-radius: 32px;
box-shadow: 0 2px 80px 0 rgba(74, 74, 74, 0.23);
padding: 0.25rem 3rem;
font-size: 1.5rem;
text-transform: uppercase;
}
.btn::before {
content:attr(data-text);
position:absolute;
left:0;
right:0;
text-align:center;
letter-spacing: initial;
color:#fff;
transition: all 0.2s ease;
}
.btn {
letter-spacing: 4px;
color:#8065F1;
position:relative;
}
.btn:hover::before {
letter-spacing: 4px;
}
<div><button type="button" class="btn btn-primary btn-large" data-text="Lorem">Lorem</button></div>
<div><button type="button" class="btn btn-primary btn-large" data-text="Lorem Ipsum">Lorem Ipsum</button></div>
<div><button type="button" class="btn btn-primary btn-large" data-text="Lorem Ipsum Dolor">Lorem Ipsum Dolor</button></div>
另一个使用不透明度和两个伪元素以防背景不是纯色:
.btn {
display: inline-block;
text-align: center;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
border-radius: 0.25rem;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom:10px;
}
.btn-primary {
background: linear-gradient(#8065F1,purple);
color: #FFFFFF;
}
.btn-large {
border-radius: 32px;
box-shadow: 0 2px 80px 0 rgba(74, 74, 74, 0.23);
padding: 0.25rem 3rem;
font-size: 1.5rem;
text-transform: uppercase;
}
.btn {
position:relative;
font-size:0;
}
.btn::before {
content:attr(data-text);
position:absolute;
left:0;
right:0;
text-align:center;
letter-spacing: initial;
font-size: 1.5rem;
transition: all 0.2s ease;
}
.btn::after {
content:attr(data-text);
letter-spacing: 4px;
opacity:0;
font-size: 1.5rem;
}
.btn:hover::before {
letter-spacing: 4px;
}
<div><button type="button" class="btn btn-primary btn-large" data-text="Lorem">Lorem</button></div>
<div><button type="button" class="btn btn-primary btn-large" data-text="Lorem Ipsum">Lorem Ipsum</button></div>
<div><button type="button" class="btn btn-primary btn-large" data-text="Lorem Ipsum Dolor">Lorem Ipsum Dolor</button></div>
如何关闭 box-sizing,然后使用 percentage 作为填充?无论您的内容有多大,它都应该能正常工作,但我的数字可能有误,因此您需要调整数字以使其准确。
.wrapper{
display:inline-block;
}
button{
box-sizing: content-box;
padding: 0 10.4%;
border: none;
width: 100%;
font-size:13px;
}
button:hover{
letter-spacing:0.1em;
padding:0;
}
.outer-wrapper{
}
<div class="outer-wrapper">
<div class="wrapper">
<button class='button'>Small Text</button>
</div>
</div>
<div class="outer-wrapper">
<div class="wrapper">
<button class='button'>Much much bigger text</button>
</div>
</div>
<div class="outer-wrapper">
<div class="wrapper">
<button class='button'>Small TextSmall TextSmall TextSmall TextSmall Text</button>
</div>
</div>
编辑:好吧,它...或多或少是有效的,只是结果证明是不可能。无论我调整得多么精细,我都会遇到问题,因为浏览器对子像素的渲染存在差异。 (浏览器显然舍入 rem 与 % 不同,这意味着这不可能用纯 CSS 来完成。 )
我有一些基本的按钮样式,在 :hover
上我添加了 letter-spacing
属性:
.btn {
display: inline-block;
text-align: center;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
border-radius: 0.25rem;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-primary {
background-color: #8065F1;
color: #FFFFFF;
}
.btn-large {
border-radius: 32px;
box-shadow: 0 2px 80px 0 rgba(74, 74, 74, 0.23);
padding: 0.25rem 3rem;
font-size: 1.5rem;
text-transform: uppercase;
}
.btn:hover {
letter-spacing: 4px;
}
<button type="button" class="btn btn-primary btn-large">Lorem</button>
有没有办法让width
不展开?喜欢添加 min/max-width
?但是问题是 button
元素可以包含不同的字符串长度:
.btn {
display: inline-block;
text-align: center;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
box-shadow: 0 2px 80px 0 rgba($grey, 0.23);
font-size: 1rem;
border-radius: 0.25rem;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-primary {
background-color: #8065F1;
color: #FFFFFF;
}
.btn-large {
border-radius: 32px;
-webkit-box-shadow: 0 2px 80px 0 rgba(74, 74, 74, 0.23);
box-shadow: 0 2px 80px 0 rgba(74, 74, 74, 0.23);
padding: 0.25rem 3rem;
font-size: 1.5rem;
text-transform: uppercase;
min-width: 240px;
}
.btn:hover {
letter-spacing: 4px;
}
<p>I need this "effect" (I added some min-width):</p>
<button type="button" class="btn btn-primary btn-large">Lorem</button>
<p>However it won't work for larger strings</p>
<button type="button" class="btn btn-primary btn-large">Lorem Ipsum</button><br><br>
<button type="button" class="btn btn-primary btn-large">Lorem Ipsum Dolor</button>
我知道我可以使用 JS 并将固定宽度的元素附加到它,但是我正在寻找 CSS 解决方案 - 如果有的话?
一个近似的想法是复制文本,考虑一个隐藏的已经有 letter-spacing
的文本,另一个在顶部的你动画填充已经由隐藏定义的 space文字:
这里有一个让文本颜色与背景颜色相同的想法:
.btn {
display: inline-block;
text-align: center;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
border-radius: 0.25rem;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom:10px;
}
.btn-primary {
background-color: #8065F1;
color: #FFFFFF;
}
.btn-large {
border-radius: 32px;
box-shadow: 0 2px 80px 0 rgba(74, 74, 74, 0.23);
padding: 0.25rem 3rem;
font-size: 1.5rem;
text-transform: uppercase;
}
.btn::before {
content:attr(data-text);
position:absolute;
left:0;
right:0;
text-align:center;
letter-spacing: initial;
color:#fff;
transition: all 0.2s ease;
}
.btn {
letter-spacing: 4px;
color:#8065F1;
position:relative;
}
.btn:hover::before {
letter-spacing: 4px;
}
<div><button type="button" class="btn btn-primary btn-large" data-text="Lorem">Lorem</button></div>
<div><button type="button" class="btn btn-primary btn-large" data-text="Lorem Ipsum">Lorem Ipsum</button></div>
<div><button type="button" class="btn btn-primary btn-large" data-text="Lorem Ipsum Dolor">Lorem Ipsum Dolor</button></div>
另一个使用不透明度和两个伪元素以防背景不是纯色:
.btn {
display: inline-block;
text-align: center;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
border-radius: 0.25rem;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom:10px;
}
.btn-primary {
background: linear-gradient(#8065F1,purple);
color: #FFFFFF;
}
.btn-large {
border-radius: 32px;
box-shadow: 0 2px 80px 0 rgba(74, 74, 74, 0.23);
padding: 0.25rem 3rem;
font-size: 1.5rem;
text-transform: uppercase;
}
.btn {
position:relative;
font-size:0;
}
.btn::before {
content:attr(data-text);
position:absolute;
left:0;
right:0;
text-align:center;
letter-spacing: initial;
font-size: 1.5rem;
transition: all 0.2s ease;
}
.btn::after {
content:attr(data-text);
letter-spacing: 4px;
opacity:0;
font-size: 1.5rem;
}
.btn:hover::before {
letter-spacing: 4px;
}
<div><button type="button" class="btn btn-primary btn-large" data-text="Lorem">Lorem</button></div>
<div><button type="button" class="btn btn-primary btn-large" data-text="Lorem Ipsum">Lorem Ipsum</button></div>
<div><button type="button" class="btn btn-primary btn-large" data-text="Lorem Ipsum Dolor">Lorem Ipsum Dolor</button></div>
如何关闭 box-sizing,然后使用 percentage 作为填充?无论您的内容有多大,它都应该能正常工作,但我的数字可能有误,因此您需要调整数字以使其准确。
.wrapper{
display:inline-block;
}
button{
box-sizing: content-box;
padding: 0 10.4%;
border: none;
width: 100%;
font-size:13px;
}
button:hover{
letter-spacing:0.1em;
padding:0;
}
.outer-wrapper{
}
<div class="outer-wrapper">
<div class="wrapper">
<button class='button'>Small Text</button>
</div>
</div>
<div class="outer-wrapper">
<div class="wrapper">
<button class='button'>Much much bigger text</button>
</div>
</div>
<div class="outer-wrapper">
<div class="wrapper">
<button class='button'>Small TextSmall TextSmall TextSmall TextSmall Text</button>
</div>
</div>
编辑:好吧,它...或多或少是有效的,只是结果证明是不可能。无论我调整得多么精细,我都会遇到问题,因为浏览器对子像素的渲染存在差异。 (浏览器显然舍入 rem 与 % 不同,这意味着这不可能用纯 CSS 来完成。 )