如何制作Upvote/Downvote按钮？

Question

这只是为了造型,我试图以与在SO和Reddit上完成相同的方式进行upvote/downvote,从我可以看到他们使用箭头图像作为背景然后定位它,但我是一个CSS新手,我需要有人来指导我.提前致谢.

Answer 1

您可以通过向背景添加不同的图片来实现,一个按钮的每个状态.然而,有一种更清洁,更容易,更现代的方法来实现这一结果:Sprites.

精灵是保存为较大图像的一部分的图像.使用精灵的最大优点之一是减少到服务器的往返所有图像只需要一个Sprites请求.显示图片的元素将图像作为背景.背景相对于元素移动,因此元素仅显示图像的一部分.就像你在海报上移动相框一样(或者在这种情况下:在海报下移动海报)

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

for (const btn of document.querySelectorAll('.vote')) {
  btn.addEventListener('click', event => {
    event.target.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: <span class="vote"> </span>

您可以轻松地以相同的方式向精灵添加更多状态,例如'hover'和'active'.甚至可以将整个页面的所有图像放在一个图像中.您可以使用firebug或Chrome开发人员工具对此进行验证.寻找'sprites.png'.

Answer 2

我在这个链接中只使用了这些三角形的CSS:

http://css-tricks.com/snippets/css/css-triangle/

我希望它可以帮助某人

Answer 3

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

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>