Facebook Wow Reaction Emoji in HTML and CSS

Hello readers, Today in this blog you'll learn how to create Facebook Wow Reaction Button using only HTML & CSS. Earlier I have shared a Text Glitch Effect in HTML & CSS, 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 them reaction button called Wow. I used only HTML & CSS to create this reaction button. You can call this is a pure CSS program.

If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Facebook Wow Reaction Emoji).


I created this button just for fun and learning purposes. If you are a beginner and have some basic knowledge about HTML & CSS. Then definitely you can also create this type of reaction button or other Facebook reaction button (Like, Love, Care).

If you like this Wow reaction Button and want to get codes of this. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Facebook Wow Reaction Button in HTML & CSS only [Source Codes]

As always, before sharing the codes of this program (Facebook Wow Reaction Emoji). Let's a few talk about the main tags and codes of this program. In the HTML File, first I created a <div> with class name "center" and placed all other tags inside it. Then I created another <div> with class name "emoji" for emoji container and placed another <div> with class name "emoji_face". Inside this <div> I created three other <div> tags for emoji eye-brow, eyes, and mouth.

In the CSS File, first using * selector I reset default margins and padding to 0; which browser takes. Then I placed all elements at the center using position: absolute; left: 50; top: 50; After that, I created a circle box using CSS selector then did basic styling to it like set color values. Similarly, using other CSS selectors I created emoji eye-brow, eyes, and mouth. Then I used CSS @keyframes property to create an animation for the emoji button means I set a certain time duration to move emoji eye-brow, eyes, and mouth using @keyframes.

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 these following codes in your file.

HTML FILE:

CSS FILE:


Thanks for visiting, Keep visiting.


Post a Comment

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Previous Post Next Post