Html 按钮的设计

如何重新制作此类似按钮的设计：

关于这个：（photoshop）

代码：

$（文档）.ready（函数（）{
$.each（$（'.voting_wrapper'），function（）{
var unique_id=$（this.attr（“id”）；
post_data={'unique_id'：unique_id，'vote'：'fetch'}；
$.post（'vote\u process.php'，post\u数据，函数（响应）{
$（“#”+唯一的_id+”.up_votes'）.text（response.vote_-up）；
$（“#”+唯一的_id+”.down_votes'）.text（response.vote_down）；
}“json”）；
});
$（“.voting\u wrapper.voting\u btn”）。单击（函数（e）{
var clicked_button=$（this.children（）.attr（'class'）；
var unique_id=$（this.parent（）.attr（“id”）；
如果（单击按钮==='down按钮'）//用户不喜欢该内容
{           
post_data={'unique_id'：unique_id，'vote'：'down'；
$.post（'vote\u process.php'，post\u数据，函数（数据）{
//用新值替换投票倒计时文本
$（“#”+唯一的_id+”.down_voces'）。文本（数据）；
//感谢用户的不喜欢
警惕（“谢谢！每一张选票都很重要，甚至不喜欢！”）；
}).fail（函数（err）{
//提醒用户HTTP服务器错误
警报（错误状态文本）；
});
}
else if（单击按钮==='up\u按钮'）//用户喜欢该内容
{
//准备帖子内容
post_data={'unique_id'：unique_id，'vote'：'up'}；
//使用jQuery$.post（）将数据发送到“vote_process.php”
$.post（'vote\u process.php'，post\u数据，函数（数据）{
//用新值替换向上投票计数文本
$（“#”+唯一的_id+”.up_vots'）。文本（数据）；
//感谢用户喜欢的内容
提醒（“谢谢！喜欢这个内容。”）；
}).fail（函数（err）{
//提醒用户HTTP服务器错误
警报（错误状态文本）；
});
}
});
//结束
});
0
0

---

谢谢你的每一个回答，你想让它看起来像这样吗

我使用了

font-awesome

图标，如下所示：

HTML

<div class="content_wrapper">
        <!-- voting markup -->
        <div class="voting_wrapper" id="1001">
            <div class="voting_btn">
                <span class="up_votes">0</span><br>
                <i class="fa fa-thumbs-up"></i>
            </div>
            <div class="voting_btn">
                <span class="down_votes">0</span><br>
                <i class="fa fa-thumbs-down"></i>
            </div>
        </div>
        <!-- voting markup end -->



</div>

---

你以前用过字体吗？

<div class="content_wrapper">
        <!-- voting markup -->
        <div class="voting_wrapper" id="1001">
            <div class="voting_btn">
                <span class="up_votes">0</span><br>
                <i class="fa fa-thumbs-up"></i>
            </div>
            <div class="voting_btn">
                <span class="down_votes">0</span><br>
                <i class="fa fa-thumbs-down"></i>
            </div>
        </div>
        <!-- voting markup end -->



</div>

.content_wrapper{width:500px;margin-right:auto;margin-left:auto;}
h3{color: #979797;border-bottom: 1px dotted #DDD;font-family: "Trebuchet MS";}
.voting_btn span{font-size: 11px; }
.voting_btn{float: left; margin: 10px; text-align: center;}