在悬停时使用字母间距时保持宽度 [英] Keep width when using letter-spacing on hover

问题描述

我有一些基本的按钮样式，在:hover上我添加了letter-spacing属性:

I have a some basic button styles where on :hover I add the letter-spacing property:

.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元素可以包含不同的字符串长度:

Is there a way that width doesn't expand? Like adding min/max-width? However the problem is that button elements can contain different string length:

.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解决方案-如果有的话?

I know I can use JS and append the elements fixed width to it, however I'm looking for a CSS solution - if there is one?

推荐答案

一个近似的想法是考虑一个隐藏的已经具有letter-spacing的文本和另一个要设置动画以填充该文本的顶部来复制文本.隐藏文字已经定义的空间:

On idea to approximate this is to duplicate the text considering a hidden one that has already the letter-spacing and another one on the top that you animate to fill the space already defined by the hidden text:

这里是通过使文本颜色与背景颜色相同的想法:

Here is an idea by making the text color the same as background:

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

如果背景不是纯色，另一种使用不透明度和两个伪元素:

Another one using opacity and both pseudo element in case the background is not a solid color:

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

这篇关于在悬停时使用字母间距时保持宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！