如何制作赞成/反对按钮？答案

【问题标题】：How can I make an Upvote/Downvote button?如何制作赞成/反对按钮？
【发布时间】：2010-11-25 07:07:38
【问题描述】：

这只是为了样式，我正在尝试像在 SO 和 Reddit 上一样进行赞成/反对，从我可以看到他们使用箭头图像作为背景然后定位它，但我我是一个 CSS 新手，我需要有人带我完成它。提前致谢。

【问题讨论】：

【解决方案1】：

您可以通过在背景中添加一张不同的图片来做到这一点，按钮的每种状态都有一张。然而，有一种更清洁、更简单、更现代的方式来实现这一结果：Sprites。

精灵是保存为较大图像的一部分的图像。使用 sprite 的最大优势之一是将所有图像到服务器的往返次数减少为仅对 Sprite 的一次请求。显示图片的元素以图像为背景。背景相对于元素移动，因此元素仅显示图像的一部分。就像您将相框移到海报上（或者在这种情况下：将海报移到相框下）

在 SO，他们制作了一个包含按钮所有状态的图像。他们为按钮的元素（在本例中为 span）提供固定的宽度和高度，并使用 CSS 为其添加背景。然后在单击事件上使用 javascript 切换状态类（打开或关闭）。现在你在 CSS 中唯一需要做的就是用 CSS 类改变背景的位置：

for (const btn of document.querySelectorAll('.vote')) {
  btn.addEventListener('click', event => {
    event.currentTarget.classList.toggle('on');
  });
}

.vote {
  display: inline-block;
  overflow: hidden;
  width: 40px;
  height: 25px;
  cursor: pointer;
  background: url('http://i.stack.imgur.com/iqN2k.png');
  background-position: 0 -25px;
} 


.vote.on {
  background-position: 0 2px;
}

Click to vote (using sprites): &lt;span class="sprite vote"&gt; &lt;/span&gt;

您可以以同样的方式轻松地向精灵添加更多状态，例如“悬停”和“活动”。 SO甚至将整个页面的所有图像放在一个图像中。您可以使用 firebug 或 Chrome 开发者工具来验证这一点。寻找“sprites.png”。

更新（2020 年）

我回答这个问题已经 10 年了，在这个时候，景观已经改变。现在您也可以使用 inline svg 来实现此效果。我已经更新了代码 sn-p 以使用 svg。这就是 stackoverflow 目前的做法。

它通过在单击按钮时切换周围 span 元素的颜色属性来工作。 span 元素包含箭头的内联 svg 图像。构成箭头的路径的fill 属性用currentColor 初始化，指示它采用当前文本颜色。

for (const btn of document.querySelectorAll('.vote')) {
  btn.addEventListener('click', event => {
    event.currentTarget.classList.toggle('on');
  });
}

.vote {
  display: inline-block;
  cursor: pointer;
  color: #687074
} 


.vote.on {
  color: #f48024
}

Click to vote (using svg): 
<span class="vote">
  <svg width="36" height="36">
    <path d="M2 10h32L18 26 2 10z" fill="currentColor"></path>
  </svg>
</span>

【讨论】：

+1 该技术被称为 CSS Sprites，它提供了比其他方法更好的性能，即为每个按钮状态提供单独的图像。您可能希望将所有四种状态添加到一张图像中，然后按照 Jan 指定的方式更改背景。
是的，但是对于这个应用程序来说它是非常基本的。如果你想为网络开发，你应该学习基础知识。
@Jan 正是我想要的！
@DavidWeisser 您将在同一张图片中为 downvote 按钮添加两个精灵，并使用相同的技术以在这两种状态之间切换的方式定位背景。或者，您可以使用 inline svg 来实现相同的效果，我更新了答案以包含该技术（同时已更新 SO 以使用此技术）
你能添加投票的svg路径吗>

【解决方案2】：

你可以通过使用两个简单的图像来做到这一点......在一些图像编辑器（如 Photoshop）中设计两个图像，如果你没有 MSPaint......

CSS代码是

#voting{
   width:30px;
   height:40px;
}
.upvote{
   width:30px;
   height: 20px;
   cursor: pointer;
}
.downvote{
   width:30px;
   height: 20px;
   background: url('downvote.jpg') 0 0 no-repeat;
   cursor: pointer;
}

HTML 代码：

<div id="voting">
    <div class="upvote"></div>
    <div class="downvote"></div>
</div>

【讨论】：