如何製作Upvote/Downvote按鈕？

Question

這只是爲了造型，我想作出給予好評/ downvote同樣的方式，它是在SO和Reddit做，從我所看到的，他們用箭頭圖像作爲背景，然後放置它，但我一個CSS新手，我需要有人來通過它。提前致謝。

Answer 1

您可以通過向背景中添加一張不同的圖片來實現，每個圖片都爲按鈕的每個狀態。然而，實現這個結果有更簡單，更現代的方式：精靈。

甲子畫面是保存作爲較大圖像的一部分的圖像。使用精靈的最大優勢之一是將所有圖像的往返服務器的往返次數減少到精靈的一次請求。顯示圖片的元素具有圖片作爲背景。背景相對於元素移動，因此元素僅顯示圖像的一部分。當你在海報移動相框贊（或在這種情況下：移動框架下的海報）

在SO他們做出一個包含所有國家的按鈕圖像。他們給按鈕的元素（在這種情況下爲span）固定的寬度和高度，並用CSS添加背景。然後在click事件中用javascript切換一個類的狀態（開或關）。現在，你必須在CSS中做的唯一的事情就是改變背景的位置與CSS類：

$('.vote').click(function() { 
 
    $(this).toggleClass('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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
Click to vote: <span class="vote"> </span>

您可以輕鬆地添加更多的國家像「懸停」和「積極的」一樣的精靈辦法。所以甚至將整個頁面的所有圖像放在一個圖像中。您可以使用螢火蟲或Chrome開發者工具進行驗證。尋找'sprites.png'。

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

Answer 3

我只用在這個環節使用這些三角形CSS：

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

我希望它可以幫助別人