"Facebook Reaction"
Bootstrap 3.3.0 Snippet by progjonner

<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"); } }); });

Related: See More


Questions / Comments: