How to Add WhatsApp Share Button Using HTML & CSS?
In this article, we’ll build a WhatsApp Share Button using HTML and CSS code and add it to our website so that whenever someone clicks on the symbol, the message is shared with the specific person whose number is connected to our WhatsApp API. In this article, we’ll demonstrate how to incorporate a chat feature into our website using APIs.
The most popular cross-platform messaging software in the world, WhatsApp, is also one of the most secure methods to contact family and friends that live overseas. End-to-end encryption and free web-based international calling are two of WhatsApp’s well-known privacy features.
50+ HTML, CSS & JavaScript Projects With Source Code
What is an API?
An application programming interface is referred to as an API. The term “application” in the context of APIs refers to any software with a specific function. API (application program interface) in which the user uses some unique keys that are specific to each user. They make a request from the server through the API, and then the fetched information is sent back to the client. Developers can find instructions in their API documentation on how to format those requests and responses.
What is the use of WhatsApp Share button?
A share button contains a hyperlink to a particular website. The WhatsApp Share button is used to share the user’s WhatsApp link so that multiple users can connect with the developer through the WhatsApp shareable link. It provides easy access and also saves time compared to manually adding users through contacts.
I hope you have a general idea of what the project entails. In our article, we will go over this project step by step.
Restaurant Website Using HTML and CSS
Step1: Adding HTML Markup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/1cf483120b.js" crossorigin="anonymous"></script>
<title>WhatsApp Icon</title>
</head>
<body>
<h1>WhatsApp Button</h1>
<p>If you liked this pen, don't forget to heart, share and follow!</p>
<a target="_blank" href="https://api.whatsapp.com/send?phone=8708526164&text=hlo" class="whatsapp-button"><i
class="fab fa-whatsapp"></i></a>
</body>
</html>The project’s structure will be included first, but first we must include certain information inside the link, such as the fact that we utilised a CSS file, which we must connect inside our HTML code. In order to incorporate the icons into our project, we also used some icons on our Timeline page, so we needed to include some icon links inside the head part of our HTML.
<link rel="stylesheet" href="style.css" /> <script src="https://kit.fontawesome.com/1cf483120b.js" crossorigin="anonymous"></script>
Adding the Structure for our Whatsapp Icon:
To add the WhatsApp icon structure to our website, we will use the fundamental HTML elements. This is a very simple structure; we’ll just add the main heading and then add the WhatsApp icon class inside our body using the font-awesome classes.
- We will now give our webpage a primary, large heading using the <h1> element, and we will add the little description using the <p> tag. You can follow us on YouTube and Instagram if you appreciate our project and would want to see more of them.
- Using the <a> tag we will add a whatsapp icon class inside our anchor link and inside our href we will add the Whataspp API link.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Let’s have a look at our webpage now that we’ve added structure.
Output:
Step2: Adding CSS Code
In your stylesheet, copy and paste the CSS code provided below.
html,
body {
width: 100%;
height: 100%;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-content: center;
background: #00c6ff; /* fallback for old browsers */
background: -webkit-linear-gradient(
to right,
#0072ff,
#00c6ff
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to right,
#0072ff,
#00c6ff
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: "Montserrat", sans-serif;
color: #ffffff;
}
h1 {
font-size: 4em;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
}
p {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}
.whatsapp-button {
position: fixed;
bottom: 15px;
right: 15px;
z-index: 99;
background-color: #25d366;
border-radius: 50px;
color: #ffffff;
text-decoration: none;
width: 50px;
height: 50px;
font-size: 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
-webkit-box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 1);
animation: effect 5s infinite ease-in;
}
@keyframes effect {
20%,
100% {
width: 50px;
height: 50px;
font-size: 30px;
}
0%,
10% {
width: 55px;
height: 55px;
font-size: 35px;
}
5% {
width: 50px;
height: 50px;
font-size: 30px;
}
}
Step1: The width and height of our body will be set to “100%” using the html body element selector. We’ll also use it to set the display to “flex” and centre all of the items using the align item attribute. We’ll add a linear gradient backdrop in shades of blue and light blue using the background attribute. The font colour is set to “white” and the font family is “Montserrat.”
Gym Website Using HTML and CSS With Source Code
html,
body {
width: 100%;
height: 100%;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-content: center;
background: #00c6ff; /* fallback for old browsers */
background: -webkit-linear-gradient(
to right,
#0072ff,
#00c6ff
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to right,
#0072ff,
#00c6ff
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: "Montserrat", sans-serif;
color: #ffffff;
}
Step2: Using the tag selector (h1), we will now style our HTML elements by setting the font-size to “4 em” and adding a black text shadow to the h1 heading with the text-shadow property.
Restaurant Website Using HTML and CSS
To add text shadows to our paragraph text, we will also use the tag selector (p).
ADVERTISEMENT
h1 {
font-size: 4em;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
}
p {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}Step3: Now using the class selector (.whatsapp-button) we will set the position as “fixed” and using the bottom property we will leave a 15px space from bottom and right property we will leave space 15px from right.Using the background color property we will set the background as “green” and we have also added a border radius of 50px to add the round shape to our icon. The width and height is set as 50px respecitvely.Using the animate property we will add effect ease-in to our icon.
ADVERTISEMENT
The @keyframes rule is now able to provide the animation code by using the keyframe property. A progressive transition from one set of CSS styles to another is used to produce the animation. The collection of CSS styles can be altered repeatedly while the animation is playing.
ADVERTISEMENT
.whatsapp-button {
position: fixed;
bottom: 15px;
right: 15px;
z-index: 99;
background-color: #25d366;
border-radius: 50px;
color: #ffffff;
text-decoration: none;
width: 50px;
height: 50px;
font-size: 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
-webkit-box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 1);
animation: effect 5s infinite ease-in;
}
@keyframes effect {
20%,
100% {
width: 50px;
height: 50px;
font-size: 30px;
}
0%,
10% {
width: 55px;
height: 55px;
font-size: 35px;
}
5% {
width: 50px;
height: 50px;
font-size: 30px;
}
}
Now we’ve completed our whatsapp Icon using HTML , CSS . I hope you understood the whole project. Let’s take a look at our Live Preview.
ADVERTISEMENT
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
ADVERTISEMENT
Output:
Live Preview Of WhatsApp Share button using HTML, CSS
Now we have successfully created our WhatsApp icon using HTML and CSS. You can use this project directly by copying it into your IDE. We hope you understood the project. If you have any doubt, feel free to comment!
If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
FAQ
What is an API?
An application programming interface is referred to as an API. The term “application” in the context of APIs refers to any software with a specific function. API (application program interface) in which the user uses some unique keys that are specific to each user. They make a request from the server through the API, and then the fetched information is sent back to the client. Developers can find instructions in their API documentation on how to format those requests and responses.
What is the use of the WhatsApp Share button?
A share button contains a hyperlink to a particular website. The WhatsApp Share button is used to share the user’s WhatsApp link so that multiple users can connect with the developer through the WhatsApp shareable link. It provides easy access and also saves time compared to manually adding users through contacts.
