设计按钮

-1

如何改造这个喜欢按钮的设计：设计按钮

在此：（Photoshop中）

代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $.each($('.voting_wrapper'), function(){ 
     var unique_id = $(this).attr("id"); 
     post_data = {'unique_id':unique_id, 'vote':'fetch'}; 
     $.post('vote_process.php', post_data, function(response) { 
       $('#'+unique_id+' .up_votes').text(response.vote_up); 
       $('#'+unique_id+' .down_votes').text(response.vote_down); 
      },'json'); 
    }); 
    $(".voting_wrapper .voting_btn").click(function (e) { 
     var clicked_button = $(this).children().attr('class'); 
     var unique_id = $(this).parent().attr("id");  
     if(clicked_button==='down_button') //user disliked the content 
     {   
      post_data = {'unique_id':unique_id, 'vote':'down'}; 

      $.post('vote_process.php', post_data, function(data) { 

       //replace vote down count text with new values 
       $('#'+unique_id+' .down_votes').text(data); 

       //thank user for the dislike 
       alert("Thanks! Each Vote Counts, Even Dislikes!"); 

      }).fail(function(err) { 

      //alert user about the HTTP server error 
      alert(err.statusText); 
      }); 
     } 
     else if(clicked_button==='up_button') //user liked the content 
     { 
      //prepare post content 
      post_data = {'unique_id':unique_id, 'vote':'up'}; 

      //send our data to "vote_process.php" using jQuery $.post() 
      $.post('vote_process.php', post_data, function(data) { 

       //replace vote up count text with new values 
       $('#'+unique_id+' .up_votes').text(data); 

       //thank user for liking the content 
       alert("Thanks! For Liking This Content."); 
      }).fail(function(err) { 

      //alert user about the HTTP server error 
      alert(err.statusText); 
      }); 
     } 

    }); 
    //end 



}); 


</script> 
<style type="text/css"> 
<!-- 
.content_wrapper{width:500px;margin-right:auto;margin-left:auto;} 
h3{color: #979797;border-bottom: 1px dotted #DDD;font-family: "Trebuchet MS";} 

/*voting style */ 
.voting_wrapper {display:inline-block;margin-left: 20px;} 
.voting_wrapper .down_button {background: url(images/thumbs.png) no-repeat;float: left;height: 14px;width: 16px;cursor:pointer;margin-top: 3px;} 
.voting_wrapper .down_button:hover {background: url(images/thumbs.png) no-repeat 0px -16px;} 
.voting_wrapper .up_button {background: url(images/thumbs.png) no-repeat -16px 0px;float: left;height: 14px;width: 16px;cursor:pointer;} 
.voting_wrapper .up_button:hover{background: url(images/thumbs.png) no-repeat -16px -16px;;} 
.voting_btn{float:left;margin-right:5px;} 
.voting_btn span{font-size: 11px;float: left;margin-left: 3px;} 

--> 
</style> 
</head> 

<body> 
<div class="content_wrapper"> 
     <!-- voting markup --> 
     <div class="voting_wrapper" id="1001"> 
      <div class="voting_btn"> 
       <div class="up_button">&nbsp;</div><span class="up_votes">0</span> 
      </div> 
      <div class="voting_btn"> 
       <div class="down_button">&nbsp;</div><span class="down_votes">0</span> 
      </div> 
     </div> 
     <!-- voting markup end --> 



</div> 

</body> 
</html>

我感谢每个answerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr

来源

2015-08-18 pn123

你想让它看起来像这样吗？ https://jsfiddle.net/byB9d/6221/

我用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>

。 CSS

.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;}

来源

2015-08-18 19:17:36

THX非常:) – pn123

你有使用的字体 - 真棒过吗？ –

回答

相关问题