<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div>
<h1>Facebook style reaction</h1>
<div class="facebook-reaction"><!-- container div for reaction system -->
<span class="like-btn"> <!-- Default like button -->
<span class="fa like-btn-emo fa-thumbs-o-up"></span> <!-- Default like button emotion-->
<span class="like-btn-text">Like</span> <!-- Default like button text,(Like, wow, sad..) default:Like -->
<ul class="reactions-box">
<!-- Reaction buttons container-->
<li class="reaction reaction-like" data-reaction="Like"></li>
<li class="reaction reaction-love" data-reaction="Love"></li>
<li class="reaction reaction-haha" data-reaction="HaHa"></li>
<li class="reaction reaction-wow" data-reaction="Wow"></li>
<li class="reaction reaction-sad" data-reaction="Sad"></li>
<li class="reaction reaction-angry" data-reaction="Angry"></li>
</ul>
</span>
<div class="like-stat"> <!-- Like statistic container-->
<span class="like-emo"> <!-- like emotions container -->
<span class="like-btn-like"></span> <!-- given emotions like, wow, sad (default:Like) -->
</span> <span class="like-details">Dhaval Rana and 1k others</span> </div>
</div>
</div>
</div>
.facebook-reaction { max-width: 100%; position: relative; margin-top:100px; }
.like-btn { color: #777777; position: relative; cursor: pointer; padding: 20px 20px 0 0; }
.like-btn:hover { color: #0db5e4; }
.like-btn-default:before { font-family: FontAwesome; content: "\f087"; color: #FFFFFF; width: 22px; height: 22px; text-align: center; border-radius: 50%; font-weight: normal; line-height: 22px; background: #777777; }
.like-btn-emo { display: inline-block; margin: 0 0px -3px 0; color: #FFFFFF; width: 22px; height: 22px; text-align: center; border-radius: 50%; font-weight: normal; line-height: 22px !important; background: #777777; }
.reactions-box { height: 62px; width: auto; padding: 10px; position: absolute; top: -45px; left: 1px; box-shadow: 1px 1px 2px #cccccc, -1px 0px 2px #eeeeee; border-radius: 44px 44px; display: none; background: #ffffff; }
.reaction { list-style-type: none; cursor: pointer; display: table-cell; position: relative; text-align: center; padding-left: 5px; padding-right: 5px; }
.like-btn:hover .reactions-box { display: block; }
.reaction-like::after { font-family: FontAwesome; content: "\f087"; font-size: 2em; color: rgb(100,160,240);}
.reaction-love::after { font-family: FontAwesome; content: "\f004"; font-size: 2em; color: rgb(242, 82, 104);}
.reaction-haha::after { font-family: FontAwesome; content: "\f118"; font-size: 2em; color: rgb(240, 186, 21);}
.reaction-wow::after { font-family: FontAwesome; content: "\f005"; font-size: 2em; color: rgb(240, 186, 21);}
.reaction-sad::after { font-family: FontAwesome; content: "\f119"; font-size: 2em; color: rgb(240, 186, 21);}
.reaction-angry::after { font-family: FontAwesome; content: "\f11a"; font-size: 2em; color: rgb(247, 113, 75);}
.like-btn:hover .reaction { opacity: 1; }
.reaction:hover { transform: scale(1.3, 1.3); top: 2px }
.reaction::before { display: inline-block; color: #ffffff; text-align: center; min-width: 80%; line-height: 17px; font-size: .6em; height: 17px; margin-left: auto; margin-right: auto; padding-left: 5px; padding-right: 5px; background-color: rgba(0, 0, 0, 1); border-radius: 20px; position: absolute; top: -20px; opacity: 0; transition: opacity .2s ease-in-out 0s; }
.reaction:hover::before { opacity: 1 }
.reaction-like::before { content: 'Like' }
.reaction-love::before { content: 'Love' }
.reaction-haha::before { content: 'Haha' }
.reaction-wow::before { content: 'Wow' }
.reaction-sad::before { content: 'Sad' }
.reaction-angry::before { content: 'Angry' }
.like-stat { margin-top: 10px; }
.like-btn-like { background: rgb(100,160,240); color: #ffffff; }
.like-btn-like:before { font-family: FontAwesome; content: "\f087"; }
.like-btn-love { background: rgb(242, 82, 104); color: #ffffff; }
.like-btn-love:before { font-family: FontAwesome; content: "\f004"; }
.like-btn-haha { background: rgb(240, 186, 21); color: #ffffff; }
.like-btn-haha:before { font-family: FontAwesome; content: "\f118"; }
.like-btn-wow { background: rgb(240, 186, 21); color: #ffffff; }
.like-btn-wow:before { font-family: FontAwesome; content: "\f005"; }
.like-btn-sad { background: rgb(240, 186, 21); color: #ffffff; }
.like-btn-sad:before { font-family: FontAwesome; content: "\f119"; }
.like-btn-angry { background: rgb(247, 113, 75); color: #ffffff; }
.like-btn-angry:before { font-family: FontAwesome; content: "\f11a"; }
.like-btn-text-like { color: rgb(88, 144, 255); }
.like-btn-text-wow, .like-btn-text-haha, .like-btn-text-sad { color: rgb(240, 186, 21) }
.like-btn-text-love { color: rgb(242, 82, 104) }
.like-btn-text-angry { color: rgb(247, 113, 75); }
.like-emo > span { display: inline-block; margin: 0 -3px -3px 0px; width: 22px; height: 22px; border: 1px solid #EEE; border-radius: 50%; text-align: center; }
.like-details { margin-left: 10px; color: #9197a3; font-size: 12px; }
$(document).ready(function(){
"use strict";
$(".reaction").on("click",function(){ // like click
var data_reaction = $(this).attr("data-reaction");
$(".like-details").html("You, Dhaval Rana and 1k others");
$(".like-btn-emo").removeClass().addClass('like-btn-emo').addClass('like-btn-'+data_reaction.toLowerCase());
$(".like-btn-text").text(data_reaction).removeClass().addClass('like-btn-text').addClass('like-btn-text-'+data_reaction.toLowerCase()).addClass("active");
if(data_reaction === "Like"){
$(".like-emo").html('<span class="like-btn-like"></span>');
}
else{
$(".like-emo").html('<span class="like-btn-like"></span><span class="like-btn-'+data_reaction.toLowerCase()+'"></span>');
}
});
$(".like-btn-text").on("click",function(){ // undo like click
if($(this).hasClass("active")){
$(".like-btn-text").text("Like").removeClass().addClass('like-btn-text');
$(".like-btn-emo").removeClass().addClass('like-btn-emo').addClass("like-btn-default");
$(".like-emo").html('<span class="like-btn-like"></span>');
$(".like-details").html("Dhaval Rana and 1k others");
}
});
});
