带有 3 个水平点的 HTML 按钮样式答案

【问题标题】：HTML button style with 3 horizontal dots带有 3 个水平点的 HTML 按钮样式
【发布时间】：2020-06-30 05:01:37
【问题描述】：

我正在尝试使用下面的 css 类和 unicode 字符“...”（U+2026）创建一个带有 3 个水平点的按钮。

但是当我应用背景时，它需要更多的宽度和高度，任何人都可以建议。在随附的屏幕截图中，我需要第一张图片，但要获取第二张图片。

.test:after {
  content: '\2026';
  font-size: 25px;
  background-color: #D0D0D0;
}

&lt;div class="test"&gt;&lt;/div&gt;

【问题讨论】：

原始按钮是由离散的 html 元素形成的还是主要只是一个图像？
嗨@Ouroborus，毛石是 flex mx:button 。
你想要的是button，为什么还要使用div？

标签： html css button

【解决方案1】：

这个怎么样？

在button 中放置一个<div> 可以让我们微调点的位置。

button {
  border: 2px solid #9fa2a4;
  height: 18px;
  border-radius: 5px;
  background: linear-gradient(#fbfbfb, #d1d1d1); /* gives the "gradient */ color background"
}

.dots {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; /* The Arial font appears to have "square" dots */
    font-size: 36px; /* The size of the dots */
    line-height: 0; /* helps vertically position the dots */
    margin-top: -10px; /* helps "raise" the dots higher */
    letter-spacing: -2px; /* "squeezes" the dots closer together */
}

<button>
    <div class="dots">...<div>
</button>

【讨论】：

嗨@Sergey，是的，它是 100% 匹配的，非常感谢，将其标记为答案，实际上我对 css 样式了解不多。
嗨@sergey，我想要锚标签而不是按钮的相同样式，如果可能，请提供。
您可以改用&hellip; 实体，因为这实际上是一个水平省略号。也可以为您节省字母间距。
是的，我喜欢使用 www.ampwhat.com 来查找 unicode 字符。我的目标是简单地避开“点背景图像”方法。但是，是的，有很多方法可以实现这些点。我喜欢字母间距可以控制点的间距。
嗨@Sergey，当点击您提供的按钮时，它会在顶部显示黑线，请检查

【解决方案2】：

大部分都用代码实现了所需的样式。现在尝试在结果图像中的 3 个点之前和之后添加空白背景。

.horizontal-dots {
    cursor: pointer;
    width: 19px;
    height: 14px;
    background-image: radial-gradient(circle, black 1.5px, transparent 2.0px);
    background-size: 6px 16px;
    background-color: #EEEEEE;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    border-radius: 0.2em;
    margin-left: 14px;
}
.horizontal-dots:hover {
   border: solid .2px #0198E1;
   
}

<div class="horizontal-dots">
</div>

【讨论】：

试试padding CSS 属性
您可能想尝试不同的字体以使点更“矩形”。另外，为什么不只使用三个点……而不是 unicode 字符。使用三个点，您还可以使用 letter-spacing 将点分散得更远
进一步看起来原件有轻微的渐变背景。您可以通过以下方式实现：developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient.horizontal-dots { background: linear-gradient(#f9f9f9, #d1d1d1); }
嗨@Sergey，当应用填充时，背景图像重复并添加了一个点。
嗨@Sergey，应用建议的线条背景：linear-gradient(#f9f9f9, #d1d1d1);从背景中删除所有点。感谢您的帮助。