我有一些基本的按钮样式,在 :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
,另一个在顶部,你设置动画来填充隐藏文本已经定义的空间:
这是一个让文本颜色与背景颜色相同的想法:
.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>
关于css - 在悬停时使用字母间距时保持宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54440571/