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/boxicons@2.1.2/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/boxicons@2.1.2/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;
}
}