Как сверстать кнопку button со стрелкой?

Question

Нужно сверстать кнопку тегом button с текстом и стрелкой. В макете это выглядит так:

А у меня получилось так:

Возникло две проблемы:

Стрелка длинная и торчит вниз.
Стрелка находится слишком близко к тексту.

Какими свойствами можно добиться желаемого вида, как в макете? И можно ли вообще это сделать, используя тег button?

Answer 1

используйте svg иконку стрелки, а не html код.

.btn {
  font-size: 2rem;
  display: flex;
  align-items: center; /*центрируем по вертикали*/
  padding: 1rem 1.5rem;
}

.btn__icon {
  height: 2rem;
  width: auto;
  margin: 0 0 0 .5rem;
}

<button class="btn">
  <div class="btn__title">Download</div>
  <svg class="btn__icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
    <polygon fill="var(--ci-primary-color, currentColor)" points="367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75" class="ci-primary"/>
</svg>
</button>

Почему не стоит использовать html коды символов.

.block {
  font-size: 24px;
}

.block-1 {
  font-family: Arial;
}
.block-2 {
  font-family: Times;
}

<div class="block block-1">&#x40; - Arial</div>
<div class="block block-2">&#x40; - Times</div>

Answer 2

Я бы использовал свойство vertical-align. Для стандарного семейства шрифтов значение этого своства равно 0.2em, для html символов стрелок по типу &darr

.class1 {
  padding: 0.5em 1em;
  font-size: 24px;
}

.class2 {
  padding: 0.5em 1em;
  font-size: 2rem;
}

.class3 {
  padding: 0.5em 1em;
  font-size: 130%;
}

button span {
  vertical-align: 0.2em;
}

<button class="class1">Download <span>&darr;</span></button>
<button class="class2">Download <span>&darr;</span></button>
<button class="class3">Download <span>&darr;</span></button>

БЛОГ НА HUSL

Как сверстать кнопку button со стрелкой?

Ответы (2 шт):