CSS Social Media Icons in Hindi / Urdu (With Source Code)

AMAOS3 May 04, 2022

 Social Media Icons in CSS3 

Social Media Icons With CSS in Hindi / Urdu

Final View Of Project


How to Make Social Media Icons With CSS:

To Make Social Media Icons Wth CSS 3 With Source Code Please Follow These Steps. This is very easy to make these icons in less than 3m. It is Used to Linked Social Media Accounts in website that the people can access easily to you on socila media.

Social Media Icons With Source Code:

First of all Open Code Editor (Vs Code)and create the File Index.html 
Now write basic code9(Boilerplate code) to start the Project.

Between the Body Tags Paste This HTML Code:

<div class="social-menu">
  <h1>Social Media Button Hover Effect</h1>
  <ul>
    <li><a href=""><i class="fa fa-facebook"></i></a></li>
    <li><a href=""><i class="fa fa-twitter"></i></a></li>
    <li><a href=""><i class="fa fa-instagram"></i></a></li>
    <li><a href=""><i class="fa fa-youtube"></i></a></li>
    <li><a href=""><i class="fa fa-linkedin"></i></a></li>
  </ul>
</div>

Now Create Style.css File and linked with HTML:

Copy and Paste this Code in CSS  File:

body {
    background-color: #d8d8d8;
}
h1 {
  text-align: center;
}
.social-menu ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    margin: 0;
    display: flex;
}
.social-menu ul li {
    list-style: none;
    margin: 0 10px;
}
.social-menu ul li .fa {
    color: #000000;
    font-size: 25px;
    line-height: 50px;
    transition: .5s;
}
.social-menu ul li .fa:hover {
    color: #ffffff;
}
.social-menu ul li a {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: white;
    text-align: center;
    transition: 0.5s;
    transform: translate(0,0px);
    box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.5);
}
.social-menu ul li a:hover {
    transform: rotate(0deg) skew(0deg) translate(0, -10px);
}
.social-menu ul li:nth-child(1) a:hover {
    background-color: #3b5999;
}
.social-menu ul li:nth-child(2) a:hover {
    background-color: #55acee;
}
.social-menu ul li:nth-child(3) a:hover {
    background-color: #e4405f;
}
.social-menu ul li:nth-child(4) a:hover {
    background-color: #cd201f;
}
.social-menu ul li:nth-child(5) a:hover {
    background-color: #0077B5;
}


Your Social Media Icons are Ready.


Tags:

Post a Comment

0 Comments