- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Environmental Science
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- articles and Answers
- Effective Resume Writing
- HR Interview articles
- Computer Glossary
- Who is Who
Facebook Wow Reaction Emoji in HTML & CSS
Hello Everyone, Today in this tutorial you’ll learn how to create Facebook Wow Reaction Button using only HTML & CSS. Earlier I have shared Build a Dictionary App in HTML CSS & JavaScript. Now it’s time to create a Facebook Wow Reaction Button.
As you know, Facebook reaction buttons mean instead of just having the option of ‘Liking’ a post, users can now interact with a status update, article, or photo using one of seven emotional reactions: Like, Love, Care, Haha, Wow, Sad, and Angry.
You already know about these reaction buttons and have seen them on Facebook. There are seven reaction buttons. But today you’ll learn to create one of the reaction buttons called Wow. I used only HTML & CSS to create this reaction button. You can call this is a pure CSS program.
Facebook Wow Reaction Emoji [Source Codes]
To create this program (Facebook Wow Reaction Emoji). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.
First, create an HTML file with the name of index.html and copy paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By Codegyan -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Wow Facebook Reaction</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="center">
<div class="emoji">
<div class="emoji_face">
<div class="emoji_brow"></div>
<div class="emoji_eye"></div>
<div class="emoji_mouth"></div>
</div>
</div>
</div>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
body{
margin: 0;
padding: 0;
background: #d4e9f7;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.emoji{
position: relative;
display: inline-block;
height: 120px;
width: 120px;
border-radius: 50%;
box-shadow: inset 0 0 10px 2px #eead2b;
background: linear-gradient(#FFED65,#EEAD2F);
}
.emoji_face,.emoji_brow,
.emoji_eye,.emoji_mouth{
position: absolute;
}
.emoji_face{
height: 120px;
width: 120px;
animation: face 3s linear infinite;
}
@keyframes face {
15%, 25%{
transform: rotate(20deg) translateX(-20px);
}
45%, 65%{
transform: rotate(-20deg) translateX(20px);
}
75%, 100%{
transform: rotate(0) translateX(0);
}
}
.emoji_brow{
left: calc(50% - 3px);
height: 6px;
width: 6px;
background: transparent;
border-radius: 50%;
box-shadow: -18px 0 0 0 #aa7408,
-33px 0 0 0 #aa7408,
18px 0 0 0 #aa7408,
33px 0 0 0 #aa7408;
animation: eye_brow 3s linear infinite;
}
@keyframes eye_brow {
15%, 65%{
top: 25px;
}
75%, 100%, 0%{
top: 15px;
}
}
.emoji_brow:before,
.emoji_brow:after{
position: absolute;
content: '';
left: calc(50% - 12px);
top: -3px;
width: 24px;
height: 20px;
border: 6px solid #aa7408;
border-radius: 50%;
box-sizing: border-box;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
.emoji_brow:before{
margin-left: -25px;
}
.emoji_brow:after{
margin-left: 25px;
}
.emoji_eye{
top: 35px;
left: calc(50% - 8px);
height: 24px;
width: 16px;
border-radius: 50%;
background: transparent;
box-shadow: 25px 0 0 0 #1b2031,
-25px 0 0 0 #1b2031;
}
.emoji_mouth{
top: 50%;
left: calc(50% - 15px);
width: 30px;
height: 40px;
border-radius: 50%;
background: linear-gradient(#54290F,#622B0B,#6E3011);
animation: mouth 3s linear infinite;
}
@keyframes mouth {
10%, 30%{
width: 20px;
height: 20px;
left: calc(50% - 10px);
}
50%, 70%{
width: 30px;
height: 40px;
left: calc(50% - 15px);
}
75%, 100%{
height: 45px;
}
}
- Related Questions & Answers
- Best Login Form or Page using HTML & CSS With Source Code
- Create a simple calculator using HTML, CSS and Javascript
- Top 5 Ways to Center a Div using CSS
- How to Create a Digital Clock Using HTML, CSS and JavaScript
- how to create an English Dictionary App using HTML & Javascript
- Html Boilerplate
- How To Create AdBlock Detector using HTML & JavaScript
- How to Detect Browser in JavaScript
- How to create Multi Tags Input Box in HTML CSS & JavaScript
- Responsive Registration Form in HTML and CSS
- Create A Todo List App in HTML CSS & JavaScript
- Santa Animation With HTML & CSS
- How to create a Facebook Post Box in HTML CSS & JavaScript
- Which is default HTML5 skeleton ?
- Create OTP Code Verification Form in HTML CSS & JavaScript
- Create Animated Minions Using HTML & CSS
Advertisements
ads