social media icons css | social media icons css code

social media icons css | social media icons css code





social media icons css | social media icons css code



Welcome🎉 to Code With Random blog. In this blog, we learn that how we how to create social media icons css . We use HTML & CSS  for this social media icons css. Hope you enjoy our blog so let's start with a basic HTML structure for social media icons css.

HTML code social media icons  

 <!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">  
  <title>social media icons css </title>  
 </head>  
 <body>  
  <a href="#" class="icon-button twitter"><i class="icon-twitter"></i><span></span></a>  
 <a href="#" class="icon-button facebook"><i class="icon-facebook"></i><span></span></a>  
 <a href="#" class="icon-button google-plus"><i class="icon-google-plus"></i><span></span></a>  
 <a href="#" class="icon-button youtube"><i class="fa fa-youtube"></i><span></span></a>  
 <a href="#" class="icon-button pinterest"><i class="fa fa-pinterest"></i><span></span></a>  
 </body>  
 </html>  
There is all HTML code for the social media icons css. Now, you can see output without CSS, then we write CSS for our social media icons css. 

Output
social media icons css | social media icons css code
Output

Javascript project ideas with complete source code 

CSS for social media icons 

 html {  
      font-size: 2.5em;  
 }  
 body {  
      background-color: #fff;  
      padding: 25px;  
      text-align: center;  
 }  
 /* Wrapper */  
 .icon-button {  
      background-color: white;  
      border-radius: 2.6rem;  
      cursor: pointer;  
      display: inline-block;  
      font-size: 1.3rem;  
      height: 2.6rem;  
      line-height: 2.6rem;  
      margin: 0 5px;  
      position: relative;  
      text-align: center;  
      -webkit-user-select: none;  
        -moz-user-select: none;  
        -ms-user-select: none;  
          user-select: none;  
      width: 2.6rem;  
 }  
 /* Circle */  
 .icon-button span {  
      border-radius: 0;  
      display: block;  
      height: 0;  
      left: 50%;  
      margin: 0;  
      position: absolute;  
      top: 50%;  
      -webkit-transition: all 0.3s;  
        -moz-transition: all 0.3s;  
         -o-transition: all 0.3s;  
          transition: all 0.3s;  
      width: 0;  
 }  
 .icon-button:hover span {  
      width: 2.6rem;  
      height: 2.6rem;  
      border-radius: 2.6rem;  
      margin: -1.3rem;  
 }  
 /* Icons */  
 .icon-button i {  
      background: none;  
      color: white;  
      height: 2.6rem;  
      left: 0;  
      line-height: 2.6rem;  
      position: absolute;  
      top: 0;  
      -webkit-transition: all 0.3s;  
        -moz-transition: all 0.3s;  
         -o-transition: all 0.3s;  
          transition: all 0.3s;  
      width: 2.6rem;  
      z-index: 10;  
 }  
 .twitter span {  
      background-color: #4099ff;  
 }  
 .facebook span {  
      background-color: #3B5998;  
 }  
 .google-plus span {  
      background-color: #db5a3c;  
 }  
 .tumblr span {  
      background-color: #34526f;  
 }  
 .instagram span {  
      background-color: #517fa4;  
 }  
 .youtube span {  
      background-color: #bb0000;  
 }  
 .pinterest span {  
      background-color: #cb2027;  
 }  
 .icon-button .icon-twitter {  
      color: #4099ff;  
 }  
 .icon-button .icon-facebook {  
      color: #3B5998;  
 }  
 .icon-button .fa-tumblr {  
      color: #34526f;  
 }  
 .icon-button .icon-google-plus {  
      color: #db5a3c;  
 }  
 .icon-button .fa-instagram {  
      color: #517fa4;  
 }  
 .icon-button .fa-youtube {  
      color: #bb0000;  
 }  
 .icon-button .fa-pinterest {  
      color: #cb2027;  
 }  
 .icon-button:hover .icon-twitter,  
 .icon-button:hover .icon-facebook,  
 .icon-button:hover .icon-google-plus,  
 .icon-button:hover .fa-tumblr,  
 .icon-button:hover .fa-instagram,  
 .icon-button:hover .fa-youtube,  
 .icon-button:hover .fa-pinterest {  
      color: white;  
 }  
 @media all and (max-width: 680px) {  
  .icon-button {  
   border-radius: 1.6rem;  
   font-size: 0.8rem;  
   height: 1.6rem;  
   line-height: 1.6rem;  
   width: 1.6rem;  
  }  
  .icon-button:hover span {  
   width: 1.6rem;  
   height: 1.6rem;  
   border-radius: 1.6rem;  
   margin: -0.8rem;  
  }  
  /* Icons */  
  .icon-button i {  
       height: 1.6rem;  
       line-height: 1.6rem;  
       width: 1.6rem;  
  }  
  body {  
       padding: 10px;  
  }  
  .pinterest {  
   display: none;   
  }  
 }  

Now we have completed our CSS section,  Here is our updated output CSS.

Output
social media icons css | social media icons css code
Output


Check it more









Now we have completed our css section,  Here is our updated output with cssHope you like social media icons css, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create social media icons css 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  

Post a Comment

Previous Post Next Post