Learn to code - How to make social media Buttons with html and css





Learn how to create social media buttons using HTML and CSS.





Try yourself >>





tip: Include font awesome library so you can use the fonts.


tip: Use more fonts free: Font awesome website


Code Example:

                
                
                
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/19997f8748.js" crossorigin="anonymous"></script>


<!DOCTYPE html>
<html lang="en">
<head>

  <title>Guide</title>
</head>
<body>

  
</body>
</html>
                
                
              
                
            


How To Create and style Social Media Buttons

1: Add HTML


example


Code Example:

                
                
                
               <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/19997f8748.js" crossorigin="anonymous"></script>


<!DOCTYPE html>
<html lang="en">
<head>

  <title>Guide</title>
</head>
<body>
<h1>Heading</h1>

<p>Paragraph</p>
<div class="socialmediacontainer">
              <a href="#" class="fab fa-facebook-square"></a>
              <a href="#" class="fab fa-youtube"></a>
              <a href="#" class="fab fa-google"></a>
              <a href="#" class="fab fa-twitter"></a>
              <a href="#" class="fab fa-instagram"></a>   
            </div>
  
</body>
</html>
                
                
              
                
            

tip: You can find more font html links to copy, in fontawesome website.


2: Add CSS


Code Example:

                
                

               
                <style>
                
                .socialmediacontainer .fa {
                padding: 20px;
                font-size: 30px;
                width: 50px;
                height: 40px;
                text-align: center;
                text-decoration: none;
              
              }
              
              
              .fab:hover {
                  opacity: 0.7;
              }
              .fa-youtube {
                background: #bb0000;
                color: white;
              }
              
              .fa-facebook-square{
                background: #3B5998;
                color: white;
              }
              .fa-twitter {
                background: #55ACEE;
                color: white;
              }
              .fa-google {
                background: #dd4b39;
                color: white;
              }
              .fa-instagram {
                background: #125688;
                color: white;
              }
                </style>
                
              
                
            

Try yourself >>


tip: If you want round buttons add border-radius:20px;






Try yourself >>



with FreeCodeWiki, you can learn to code for free , our main goal is to allow students to learn Web Development and other online coding courses in one place, learn from your home.


Navigation