时间戳

首页 > 解决方案 > 有没有办法在边框和文本之间制作一个有间距的边框？

html - 有没有办法在边框和文本之间制作一个有间距的边框？

问题描述

我尝试了很多东西，但都没有奏效，我需要帮助，因为我想制作一个hire me按钮，但我可以制作一个在文本和边框之间具有指定分隔的边框。

我有一张图片可以在这里展示我想要的东西：

在此处输入图像描述

HTML 代码：

<a class="hireme" href="#contact">HIRE ME</a>

标签： htmlcssbuttonpadding

解决方案

这是一个起点：

.hireme {
  text-decoration: none;
  padding: 1ex;
  border: thin solid gray;
  border-radius: 1em;
  text-transform: uppercase;
  color: black;
}
<a class="hireme" href="#contact">Hire Me</a>

在这：

  • text-decoration去掉链接的默认下划线
  • padding在文本和边框之间放置间距
  • border添加你想要的边框——如果太暗，试试#ccc而不是灰色，或者网络上有CSS颜色选择器
  • border-radius使边框变圆
  • text-transform使文本以大写形式呈现
  • color覆盖颜色，链接通常默认为蓝色

推荐阅读