主页 / 问题 / 1391959
Accepted
vegasmoscow
Asked:2022-08-20 21:34:51 +0000 UTC2022-08-20 21:34:51 +0000 UTC

如何制作带箭头的按钮按钮？

  • 772

有必要使用带有文本和箭头的按钮标记来布置按钮。在布局中它看起来像这样：

布局中的按钮

我得到它是这样的：

结果

出现了两个问题：

  1. 箭很长而且伸出来。
  2. 箭头离文本太近。

什么属性可以达到想要的外观，如在布局中？甚至可以使用按钮标签来做到这一点吗？

html

2 个回答

  1. Best Answer

    使用 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>

    • 1

  2. 我会使用垂直对齐属性。对于标准字体系列，该属性的值为 0.2em，对于 &darr 类型的 html 箭头符号

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

    • 1

相关问题