How to create social media button in html?

how to creat social media icons using html css?
Admin

 

social media

Overviews:

Hello reader, Today in this blogs you will learn 'How to creat soial media buttons using html and css'. This lightweight code snippet helps you create HTML social media buttons. Basically, these social buttons are designed with CSS and Box icons for social icons. You can easily integrate it into your project for linking social media profiles. Simply add a link to your social profile for the href attribute of the hyperlink.


Social media buttons or icons are essential for all types of websites. It helps you connect and share your business, products or services on social media platforms.


In the past few years, this influencer marketing strategy has become the most popular promotional tool where you can connect with people and develop relationships. Typically, many companies use this medium to create customer service by gathering input, answering questions, and listening to their feedback.


How to Create HTML Social Media Buttons

1. Box-icons

These social media buttons use Box-icons CSS for icons. So, load the Box-icons CSS by adding the following CDN link to the header tag of your HTML page.

  <!--==== BoxIcon ====-->
  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>

2. HTML

Next, create the HTML structure for the social media buttons as follows:

 
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Social-Media-buttom | -> Codewithzan</title>
  <!--==== BoxIcon ====-->
  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>

  <!--==== CSS ====-->
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="social-button">

    <span>
      <a href="#">
        <i class='bx bxl-facebook'></i>
      </a>
    </span>
    <span>
      <a href="#">
        <i class='bx bxl-instagram'></i>
      </a>
    </span>
    <span>
      <a href="#">
        <i class='bx bxl-twitter'></i>
      </a>
    </span>
    <span>
      <a href="#">
        <i class='bx bxl-gmail'></i>
      </a>
    </span>
    <span>
      <a href="#">
        <i class='bx bxl-youtube'></i>
      </a>
    </span>
    <span>
      <a href="#">
        <i class='bx bxl-reddit'></i>
      </a>
    </span>
  </div>
</body>

</html>


3. CSS

Finally, style your social media buttons with the following CSS and you're done. You can set custom size, color, and margin values ​​for social icons according to your needs.


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  background: #000;
}
a{
  text-decoration: none;
  color: #fff;
}

.social-button {
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
}

span {
  position: relative;
  display: block;
  font-size: 38px;
  height: 60px;
  width: 60px;
  line-height: 75px;
  background: #292C49;
  border-radius: 50%;
  margin: 0 20px;
}

span:nth-child(1):before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  z-index: -1;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  animation: facebook 4.5s linear infinite;
}

@keyframes facebook {
  0% {
    transform: rotate(0deg);
    box-shadow: 0 0 5px #0C20FF;
  }

  50% {
    transform: rotate(270deg);
    box-shadow: 0 0 50px #6FADFF;
  }

  100% {
    transform: rotate(360deg);
    box-shadow: 0 0 6px #8535FF;
  }
}

span:nth-child(2):before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  z-index: -1;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  animation: instagram 5s linear infinite;
}

@keyframes instagram {
  0% {
    transform: rotate(0deg);
    box-shadow: 0 0 5px #B366FF;
  }

  50% {
    transform: rotate(270deg);
    box-shadow: 0 0 50px #FF26CB;
  }

  100% {
    transform: rotate(360deg);
    box-shadow: 0 0 6px #DBFF66;
  }
}

span:nth-child(3):before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  z-index: -1;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  animation: twitter 5.5s linear infinite;
}

@keyframes twitter {
  0% {
    transform: rotate(0deg);
    box-shadow: 0 0 5px #0009FF;
  }

  50% {
    transform: rotate(270deg);
    box-shadow: 0 0 50px #812AFF;
  }

  100% {
    transform: rotate(360deg);
    box-shadow: 0 0 6px #8535FF;
  }
}

span:nth-child(4):before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  z-index: -1;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  animation: gmail 6s linear infinite;
}

@keyframes gmail {
  0% {
    transform: rotate(0deg);
    box-shadow: 0 0 5px #2021FF;
  }

  50% {
    transform: rotate(270deg);
    box-shadow: 0 0 50px #33FF00;
  }

  100% {
    transform: rotate(360deg);
    box-shadow: 0 0 6px #CA1F2D;
  }
}


span:nth-child(5):before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  z-index: -1;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  animation: youtube 6.5s linear infinite;
}

@keyframes youtube {
  0% {
    transform: rotate(0deg);
    box-shadow: 0 0 5px #FF202A;
  }

  50% {
    transform: rotate(270deg);
    box-shadow: 0 0 50px #9A272D;
  }

  100% {
    transform: rotate(360deg);
    box-shadow: 0 0 6px #FFB5B9;
  }
}

span:nth-child(6):before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  z-index: -1;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  animation: raddit 7s linear infinite;
}

@keyframes raddit {
  0% {
    transform: rotate(0deg);
    box-shadow: 0 0 5px #FF5252;
  }

  50% {
    transform: rotate(270deg);
    box-shadow: 0 0 50px #FF7700;
  }

  100% {
    transform: rotate(360deg);
    box-shadow: 0 0 6px #FF4545;
  }
}

If your code does not work or you encounter any error/problem, please download the source code files from the given download button. It is free and the .zip file will be downloaded and then you have to extract it. If you face any problem while downloading or after downloading the source code files, feel free to comment or contact us through the contact page.

Thanks for reading: How to create social media button in html?,I hope you enjoy it follow for more...:)

Getting Info...

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.