Skip to main content

Pure Css Facebook Logo Design | Pure Css Facebook Icon Design | Rustcode

by Rustcode

pure-css-facebook-logo-html-and-css-rustcode

Icons are a very important element in web development. Through icons, we can make the website interface attractive. To include the icon in the website, we can use many different icon libraries such as the library of Bootstrap, you can use the font-awesome icon library.

But in this article, we will design a Facebook icon without using any library. We will learn how to design an icon using only html and css.


RELATED POST:

1. HTML STRUCTURE

Before starting writing code, we need to create a basic structure of an HTML document, so that the browser can understand document type and may start some process. The basic HTML structure looks as below.
<!DOCTYPE html>
<html>
<head>
  <title>Document Title</title>
  <style>
  </style>
</head>

<body> 
 Content of the document.

<script type="text/javascript">
</script>

</body>
</html>

2. HTML

<body>

<div class="container">
  <div class="logo">   
  </div>
</div>

</body>

3. CSS

*{
  margin: 0px;
  padding: 0px;
}
.container{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.logo{
  position: relative;
  display: block;
  cursor: pointer;
  background: #3B5999;
  padding: 40px;
  border: 2px solid #3B5999;
}

.logo::before{
  content: "";
  display: block;
  width: 25px;
  height: 70px;
  border-radius: 20px 0px 0px 0px;
  border: 13px solid #fff;
  border-right: none;
  border-bottom: none;
  box-sizing: border-box;
  position: absolute;
  bottom: 0px;
  right: 24px;
}
.logo::after{
  content: "";
  display: block;
  width: 35px;
  height: 10px;
  position: absolute;
  bottom: 30px;
  right: 24px;
  background: #fff;
}
.logo:hover{
  box-shadow: 0px 12px 16px rgba(0, 0, 0, 0.25), 0px 17px 50px rgba(0, 0, 0, 0.20);
}


4. YouTube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.


5. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.
If this article is useful and informative for you, share it. And if you have any doubt, please leave a comment.

RELATED POST:

Comments

Post a Comment