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 increased privacy features.
What is an API?
Application Programming Interface is referred to as API. The term "application" in the context of APIs refers to any software with a specific function. Interface can be compared to a service agreement between two programmes. This agreement specifies the requests and responses that the two parties will use to communicate. Developers can find instructions in their API documentation on how to format those requests and responses.
I hope you have a general idea of what the project entails. In our article, we will go over this project step by step.
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.
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."
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.
To add text shadows to our paragraph text, we will also use the tag selector (p).
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.
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.
.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.
Now We have Successfully created our Whatsapp Icon using HTML , CSS. You can use this project directly by copying into your IDE. WE hope you understood the project , If you 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.
follow : codewithrandom
Written By : Arun
Code By: Jonathan
Top comments (0)