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,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>