我有一些基本的按钮样式,在：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,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>
有没有办法不扩大宽度？喜欢添加最小/最大宽度吗？但是,问题在于按钮元素可以包含不同的字符串长度：
.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,0.23);Box-shadow: 0 2px 80px 0 rgba(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解决方案-如果有的话？
最佳答案
大概的想法是,复制文本时要考虑一个隐藏的文本,该文本已经具有字母间距,而另一个文本在动画顶部以填充该隐藏文本已经定义的空间：
这是通过使文本颜色与背景颜色相同来实现的：
.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,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,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>
