Facebook like button Emoji Reaction

Developer
Srijon Sarker
Size
3,695 Kb
Views
32,384
  1. Facebook like button Emoji Reaction Previews
  2. Facebook like button Emoji Reaction HTML Codes
  3. Facebook like button Emoji Reaction CSS Codes
  4. Facebook like button Emoji Reaction JS Codes

How do I make an facebook like button emoji reaction?

Facebook like button Emoji Reactions with CSS & jQuery / Velocity. What is a facebook like button emoji reaction? How do you make a facebook like button emoji reaction? This script and codes were developed by Srijon Sarker on 29 November 2022, Tuesday.

Facebook like button Emoji Reaction Previews
IQ Test

Facebook like button Emoji Reaction - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Facebook like button Emoji Reaction</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:image" content="https://i.imgsafe.org/256d103.png"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<h2 class="center-align">Facebook like Emoji Reaction<br><p class="instructions">Hover "Like" Button for reactions</p></h2>
<div class="container"> <div class="fb-post"> </div> <div class="actionBox"> <span class="showEmotions"> <a class=""><i class="like"></i>Like</a> <div class="emoji-reactions"> <span> <div class="reaction"> <i class="react like"></i> </div> <div class="text"> <div>Like</div> </div> </span> <span> <div class="reaction"> <i class="react love"></i> </div> <div class="text"> <div>Love</div> </div> </span> <span> <div class="reaction"> <i class="react haha"></i> </div> <div class="text"> <div>Haha</div> </div> </span> <span> <div class="reaction"> <i class="react sorry"></i> </div> <div class="text"> <div>Sorry</div> </div> </span> <span> <div class="reaction"> <i class="react anger"></i> </div> <div class="text"> <div>Angry</div> </div> </span> <span> <div class="reaction"> <i class="react dislike"></i> </div> <div class="text"> <div>Dislike</div> </div> </span> </div> </span> <span><a><i class="comment"></i>Comment</a></span> <span><a><i class="share"></i>Share</a></span>
</div>
</div>
<footer> <div style="font-size:12px; paddding-bottom:5px;"> follow me</div> <a href="https://fb.com/abrahamrkj" target="_blank"><i class="fa fa-facebook"></i></a> | <a href="https://twitter.com/abrahamrkj" target="_blank"><i class="fa fa-twitter"></i></a>
</footer> <script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js '></script> <script src="js/index.js"></script>
</body>
</html>

Facebook like button Emoji Reaction - Script Codes CSS Codes

html { background: #f1f1f1; -webkit-box-sizing: border-box -moz-box-sizing: border-box; box-sizing: border-box; font-family: 'Open Sans', sans-serif !important;
}
a { text-decoration: none; color: #000;
}
.center-align { width: 400px; margin: 30px auto; text-align: center;
}
.container { position: absolute; top: 220px; left: 50%; width: 500px; margin-top: -125px; margin-left: -250px; height: 250px;
}
footer { position: fixed; text-align: center; /* width: 100%; */ display: inline; bottom: 10px; right: 0px;
}
footer a { padding-left: 10px; padding-right: 10px;
}
i { content: ''; display: inline-block; height: 14px; margin: 0 6px -3px 0; width: 14px;
}
.like { background-image: url(https://i.imgsafe.org/0616248.png); background-repeat: no-repeat; background-size: 500px 488px; background-position: -277px -446px
}
.comment { background-image: url(https://i.imgsafe.org/0616248.png); background-repeat: no-repeat; background-size: 500px 488px; background-position: -262px -446px
}
.share { background-image: url(https://i.imgsafe.org/0616248.png); background-repeat: no-repeat; background-size: 500px 488px; background-position: -322px -446px;
}
.actionBox { position: relative; background: #fff; padding: 10px;
}
.actionBox span { color: #7f7f7f; display: inline-block; font-size: 12px; font-weight: bold; line-height: 14px; margin-right: 20px; padding: 4px 4px 4px 0; cursor: pointer;
}
.clipDiv { clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; width: 1px;
}
.emoji-reactions { left: -14px; position: absolute; top: -50px; z-index: 200; background: #fff; display: inline-block; font-size: 0; padding: 2px 10px; text-align: left; border-radius: 70px; white-space: nowrap; height: 49px; box-shadow: 0 8px 2px -6px rgba(0, 0, 0, 0.29); display: none;
}
.emoji-reactions span { -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -webkit-backface-visibility: hidden; cursor: pointer; display: inline-block; height: 48px; margin: 0; padding: 0; position: relative; transform: scale(1, 1) translateY(.0001px); transform-origin: 50% 100%; width: 48px;
}
.emoji-reactions span .reaction { transform: scale(.8, .8) translate(0, 0); transition: transform 200ms ease;
}
.reaction .react { display: block; height: 48px; image-rendering: crisp-edges; line-height: 1; width: 48px; background-image: url(https://i.imgsafe.org/c505d7a.png); background-size: 48px 384px;
}
.react.like { background-position: 0 -144px;
}
.react.love { background-position: 0 -192px;
}
.react.haha { background-position: 0 -96px;
}
.react.wow { background-position: 0 -288px;
}
.react.sorry { background-position: 0 -240px;
}
.react.anger { background-position: 0 0;
}
.react.dislike { background-position: 0 -144px; transform: rotate(180deg);
}
.emoji-reactions span .text { left: 50%; position: absolute; text-align: center; top: -28px; transform: translateX(-50%);
}
.emoji-reactions span .text div { background-color: rgba(0, 0, 0, .75); border-radius: 10px; box-sizing: border-box; color: #fff; display: inline-block; font-size: 12px; font-weight: bold; line-height: 20px; max-width: 100%; opacity: 0; overflow: hidden; padding: 0 8px; text-decoration: none; text-overflow: ellipsis; transition: opacity 50ms ease;
}
.emoji-reactions span:hover .reaction { transform: scale(1, 1) translate(0, -6px);
}
.emoji-reactions span:hover .text div { opacity: 1;
}
.fb-post { width: 100%; background: #fff; height: 410px; background: url(https://i.imgsafe.org/aea1fb1.png) no-repeat; background-size: cover;
}
.instructions { font-size: 14px; position: relative; background: #000; color: #fff; display: inline-block; padding: 0px 15px; top: -9px;
}

Facebook like button Emoji Reaction - Script Codes JS Codes

var isAnimationEnable = 0;
var interVal;
$(document).ready(function() { $(".showEmotions").hover(function() { if (isAnimationEnable == 0) { $(".emoji-reactions").show().css('opacity', '1'); $(".emoji-reactions span").velocity("transition.bounceUpIn", { stagger: 80 }); isAnimationEnable = 1; interVal = setInterval(function() { if (isAnimationEnable == 1) { cursorListener(); } }, 500); } }, function() { }); function cursorListener() { var isHovered = !!$('.emoji-reactions , .actionBox'). filter(function() { return $(this).is(":hover"); }).length; console.log(isHovered); if (!isHovered) { $(".emoji-reactions").velocity("transition.fadeOut", { delay: 1000 }); clearInterval(interVal); isAnimationEnable = 0; } }
});
Facebook like button Emoji Reaction - Script Codes
Facebook like button Emoji Reaction - Script Codes
Home Page Home
Developer Srijon Sarker
Username Creative_Srijon
Uploaded November 29, 2022
Rating 3
Size 3,695 Kb
Views 32,384
Do you need developer help for Facebook like button Emoji Reaction?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Srijon Sarker (Creative_Srijon) Script Codes
Name
Wide Card With Share Menu Button
Flat Pricing Table
Material Profile UI Hover
Condition Based Checkbox
Image Hover ii
Flat Pricing Table
CSS Slider
Material Calendar Concept
Catagory Choosing
Material Design Image Card
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!