Сохраняйте ширину при использовании межбуквенного интервала при наведении - PullRequest
Новая
       50

Сохраняйте ширину при использовании межбуквенного интервала при наведении

0 голосов
/ 30 января 2019

У меня есть несколько основных стилей кнопок, где на :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 - если оно есть?

Ответы [ 2 ]

0 голосов
/ 30 января 2019

Как насчет отключения размера окна , а затем использования процентного для заполнения?Он должен хорошо работать независимо от размера вашего контента, но мои цифры, вероятно, неверны, поэтому вам нужно откорректировать цифры, чтобы сделать их точными. 

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

0 голосов
/ 30 января 2019

По идее, чтобы приблизиться к этому, нужно продублировать текст, учитывая скрытый текст, который уже имеет 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>
...