How to add Like button in HTML and CSS

In this article, we will learn how to add like button with the help of HTML and CSS. We will explain this article using various examples with the help of libraries, codes, etc.

HTML

HTML stands for Hypertext Markup language.HTML is the most widely used markup language, and to mark up the contents on the web page, we use various commands called tags. Each HTML tag specifies some action that the browser should display as the text on the web page. HTML is the standard language for building and designing of web pages. The latest version of HTML is HTML5.

CSS

CSS stands for Cascading style sheet. CSS was developed in 1997 by World Wide Web Consortium (W3C) to create a consistent approach for providing style information for web pages. It is a presentation definition language supported by all browsers. The term cascading refers how the styles are applied if conflicting style rules appear on the web page. It gives website designers greater control over the presentation of an HTML page as they can use styles to various elements of a web page like lists, borders, margins, tables, etc.

CSS stands for Cascading style sheet. The cascading style sheet is a powerful way of controlling a web document's layout by adding styles to it. Cascading style sheet separates the form's content from the form's presentation, which improves the accessibility of content and provides more flexibility. Through this separation, one can make global changes to all documents from a single location, which reduces complexity.

There are four types of Cascading style sheet:

Create Like button using HTML and CSS

Example1:

<! DOCTYPE html>
<html>
<head>
<title>
Facebook like button
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
.select {
width: 80%; 
padding:20px; 
border: 2px solid red; 
 }
body {
background-color: pink;
           }
p {
color: red;
font-size: 20px;
}
h1 {
color: blue;
}
h2 {
color: red;
}
b {
color: green;
}
</style>                    
</head>
<body>
<div class="select">
<h2> Example: </h2>
<h1> Create Facebook like button </h1>
<a title="Like this on Facebook" 
href="http://www.facebook.com/plugins/like.php?href=http://eyeclarity.com.au&
  
layout=standard&
  
show_faces=false&
  
width=450&
  
action=like&
  
colorscheme=light&" >
  <img title= "Facebook like Button"
        
src="like.png" 
         alt="" 
        
height ="50" 
        
width ="50" align="center" />
</a>
</div>
</body>
</html>

Output:

The output of this example is given below:

In the above output, we can see a Facebook like button, and when we click on it, the next page shows where we like the page. The output of the web page is shown below:

Facebook developer kit for adding like button in HTML

Like Button, HTML5 Attributes: Using the HTML 5 attribute, you can change a like button's default properties.

HTML5 Attribute	Description
data-action	It can be either like (default) or recommended.
data-color scheme	The color scheme is used for any text outside of the button itself. It can be light (default) or dark.
data-href	It contains the URL of the webpage.
data-layout	Selects one of the different layouts that are available for the plugin. It can be one of default, button_count, button, or box_count.
data-share	It specifies whether to include a share button beside the Like button, true or false (default).
data-size	The button is offered in 2 sizes i.e., large and small (default).

Example 1:

<! DOCTYPE html>
<html>
<head>
<title>
Font Awesome Icons
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>

body {
background-color: pink;
	}
	.select {
		margin: 40px;
		width: 60%; 
		height: 300px; 
		padding: 30px; 
		border: 2px solid green; 
		}
p {
color: red;
font-size:20px;
}
h1 {
color: blue;
}
h2 {
color: red;
}
b {
color: green;
}
i {
color: red;
}
</style>		
</head>
<body>
<div class="select">
<h2> Example: </h2>

<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=450&layout=standard&action=like&size=small&share=true&height=35&appId" width="450" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
</body>
</html>

Output:

The output of this example is given below:

Example 2:

<! DOCTYPE html>
<html>
<head>
<title>
Font Awesome Icons
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
body {
background-color: pink;
	}
	.select {
		margin: 40px;
		width: 60%; 
		height: 300px; 
		padding: 30px; 
		border: 2px solid green; 
		}
p {
color: red;
font-size:20px;
}
h1 {
color: blue;
}
h2 {
color: red;
}
b {
color: green;
}

</style>		
</head>
<body>
<div class="select">
<h2> Example: </h2>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=74&layout=box_count&action=like&size=large&share=true&height=65&appId" width="74" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
</body>
</html>

Output:

The output of this example is given below:

HTML code for heart symbol

We can also use the heart symbol as a like button in our websites and applications. In HTML, we can use multiple codes for heart symbols. With the use of these HTML code, we can create various designs for heart symbols used as a like button for websites and applications.

Symbol	Name code	Decimal code	Hex code	Description
♥	&hearts;	♥	♥	heart symbol
❤		❤	❤	heart symbol
❥		❥	❥	heart symbol

Let's take an example to create like button as heart code.

Example 1:

<! DOCTYPE html>
<html>
<head>
<title> HTML code for heart symbol
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
.select {
	width: 80%; 
	padding: 20px; 
		
		border: 2px solid red; 
		}
		body {
		background-color: black;
		}
		p {
		color: red;
		font-size:20px;
		}
		h1{
		color: green;
		}
		h2 {
		color: red;
		}
		b {
		color: green;
		}
</style>		
<body>
<div class = "select">
<h1> Example </h1>
<h2> Using HTML Code create heart symbol used as a like button </h2>
<p> ♥ <b> design 1 </b> </p> <br> 
<p> ❤ <b> design 2 </b> </p> <br>
<p> ❥ <b> design 3 </b> </p> <br>
</div>
</body>
</html>

Output:

The output of this example is given below:

Create Like button using library in HTML and CSS:

In HTML and CSS, we can use external "Font Awesome Icons library" to create like button for websites and applications. We can include this library in, <head> section of HTML with <link> tag.

Syntax:

<head>
	<title> ...... </title>
	<link rel ="stylesheet" type="text/css" href ="url of CSS file">
</head>

Example:

<head>
	<title> ...... </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

In above example:

The rel attribute is used to specify the relation between the documents containing the <link> tag and the document containing styles. The value used for rel attribute is "stylesheet".

The href attribute is used to specify the URL for the document being linked to. The value of the href attribute is the URL of the external style sheet containing CSS rules. The URL can have either absolute path or relative path.

For example: "https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css"

Let's takes some example using Font Awesome Icons library to create like button.

Example 1:

<! DOCTYPE html>
<html>
<head>
<title>
Font Awesome Icons
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
.select {
width: 80%; 
padding:20px; 
border: 2px solid red; 
 }
body {
background-color: black;
	}
p {
color: red;
font-size:20px;
}
h1 {
color: green;
}
h2 {
color: red;
}
b {
color: green;
}
i {
color: red;
}
</style>		
</head>
<body>
<div class="select">
<h2> Example: </h2>
<h1> Create like button using <b> fa fa-heart library </b> </h1>
<i class="fa fa-heart"> </i> <br>
<i class="fa fa-heart" style="font-size: 24px"> </i> <br>
<i class="fa fa-heart" style="font-size: 36px;"> </i> <br>
<i class="fa fa-heart" style="font-size: 48px; color: red"> </i> <br>
</div>
</body>
</html>

Output:

Example 2:

<! DOCTYPE html>
<html>
<head>
<title> Font Awesome Icons </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
.select {
		width: 80%; 
		padding:20px; 
		border: 2px solid red; 
		}
		body {
		background-color: black;
		}
		p {
		color: red;
		font-size: 20px;
		}
		h1 {
		color: green;
		}
		h2 {
		color: green;
		}
		b {
		color: green;
		}
		i {
		color: red;
		}
</style>		
</head>
<body>
<div class="select">
<h2> Example: </h2>
<p>like icon used on a button : </p>
<button style="font-size: 24px"> Button <i class="fa fa-heart"> </i> </button>
<p> Unicode: </p>
<button> <i style="font-size:24px" class="fa">? </i> </button>
</div>
</body>
</html>

Output:

Following is the output of the given example:

Like/dislike button using HTML and CSS

Example:

<! DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
  font-size: 50px;
  cursor: pointer;
  user-select: none;
}
.fa:hover {
  color: darkblue;
}
p {
 color: darkblue;
 }
</style>
</head>
<body>
<center>
<p>Click on the like button for (like/dislike):</p>
<i onclick="myFunction(this)" class="fa fa-thumbs-up"></i>
</center>
<script>
function myFunction(x) {
  x.classList.toggle("fa-thumbs-down");
}
</script>
</body>
</html>

Output: The output of above program is given below

To like the page, we can click on the button given below: