WhatsApp Logo Using Only Html Css | WhatsApp Logo Code

Table of Contents

WhatsApp Logo Using Only Html Css | WhatsApp Logo Code

Welcome to Code With Random blog. We learn how to create a Css WhatsApp Logo. We use HTML & CSS  for WhatsApp Logo. Hope you enjoy our blog so let’s start with a basic HTML structure for the WhatsApp Logo.

Html Code 

<!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">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 
    <title>WhatsApp Logo</title>
    <link rel="stylesheet" href="style1.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
</head>
<body>
  <div class="white">
      <div>
        <i class="fas fa-phone"></i>
      </div>
    </div>
</body>
</html>

There is all HTML code for the WhatsApp Logo. Now, you can see output without CSS, then we write CSS for the WhatsApp Logo.

Output

WhatsApp Logo

CSS Code 

body{
    margin: 0;
    padding: 0;
    background: lightblue;
}
div{
    width: 70px;
    height: 70px;
    border-radius: 35px;
    background: #3AC371;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.white{
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color: #fff;
    box-shadow: 2px 2px 3px 2px rgba(0,0,0,.3);
}
.white::before{
    content: "";
    top: 65px;
    left: -15px;
    border-width: 20px;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
    position: absolute;
    transform: rotate(-50deg) rotateX(-55deg);
}
.white::after{
    content: "";
    top: 63px;
    left: -4px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent #3AC371 transparent transparent;
    position: absolute;
    transform: rotate(-51deg) rotateX(-50deg);
}
.fas{
    left: 17px;
    top: 18px;
    position: absolute;
    font-size: 35px;
    color: #fff;
    transform: rotate(90deg);
}

We have completed our CSS section,  Here is our final updated output CSS.

Final Output

Whatsapp Logo Css

We have completed our CSS section,  Here is our updated output with CSS. Hope you like the WhatsApp Logo, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you

This post teaches us to create a WhatsApp Logo using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

code by – Md Aman

Check out more…..

1.Html And Css Projects With Source Code

2. Add To Cart Button Html

3.Notes App Using Html Css Javascript

Share on:

Leave a Comment