0

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

Кнопка в макете

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

Результат

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

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

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

2 ответа 2

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>
  

3
  • Спасибо за ответ, обязательно возьму себе в копилку решений. Хочу не поспорить, а узнать точку зрения. Чем SVG лучше HTML-символов? Я понимаю, сейчас модно использовать вместо PNG-иконок и логотипов SVG-изображения. Но в чём преимущество, кроме моды? В моём случае, а я верстаю в PUG, для вывода кнопки я использую миксин, в котором через параметр могу указать любой текст кнопки. В одном фрагменте мне нужна кнопка со стрелкой, таков макет. Указывать в качестве параметра миксина целый кусок кода SVG не удобно. Куда проще написать "Download &darr;", чем "Download ...и огромный SVG-код...". 24 мар 2022 в 11:55
  • SVG - векторная графика, png - растровая. html код - шрифт. Что касается "целый кусок кода SVG", вы всегда можете использовать svg спрайты. Что касается преимуществ и недостатков. SVG векторная графика, тянется без потери качества (важно для адаптива), кроме этого не зависит от внешних факторов (всегда отображается по заданным условиям). Что касается HTML кода, то символы зависят от шрифта (см. пример). Если вы поменяете шрифт, то и иконки ваши поплывут. (да и лишнее выравнивание через vertical-align, имхо, костыль)
    – xydope
    24 мар 2022 в 13:04
  • Про зависимость символов от шрифта понял, не очень хорошее свойство. Спасибо за наводку на SVG-спрайты, на данный момент с ними не сталкивался, изучу и попробую применить в месте этой стрелки. 24 мар 2022 в 18:52
1

Я бы использовал свойство 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.