Add Social Media Buttons using CSS in your Website
Each website needs a social media share button group. Here we have one small code representing Social Media buttons created with CSS & HTML.
The source code is uploaded to Codepen. Here is the link.
HTML Code for Social Media Buttons
Got the icons with Font-Awesome library.
<!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</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrapper">
<h2 class="title">Social Media Icons</h2>
<div class="socialicons">
<a href="#" title="Facebook" class="icon"><i class="fab fa-facebook-f"></i></a>
<a href="#" title="Twitter" class="icon"><i class="fab fa-twitter"></i></a>
<a href="#" title="Instagram" class="icon"><i class="fab fa-instagram"></i></a>
<a href="#" title="GitHub" class="icon"><i class="fab fa-github"></i></a>
<a href="#" title="LinkedIn" class="icon"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</body>
</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</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrapper">
<h2 class="title">Social Media Icons</h2>
<div class="socialicons">
<a href="#" title="Facebook" class="icon"><i class="fab fa-facebook-f"></i></a>
<a href="#" title="Twitter" class="icon"><i class="fab fa-twitter"></i></a>
<a href="#" title="Instagram" class="icon"><i class="fab fa-instagram"></i></a>
<a href="#" title="GitHub" class="icon"><i class="fab fa-github"></i></a>
<a href="#" title="LinkedIn" class="icon"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</body>
</html>
CSS Code
Here is the CSS code for HTML. flex is used to align the elements in it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.title {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 3em;
}
.socialicons {
display: flex;
margin-top: 100px;
}
.socialicons .icon{
width: 80px;
height: 80px;
box-shadow: 0 0 5px 10px rgba(0,0,0,0.05);
margin: 0 30px;
text-align: center;
line-height: 80px;
font-size: 30px;
text-decoration: none;
color: #000;
border-radius: 50%;
position: relative;
overflow: hidden;
}
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.title {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 3em;
}
.socialicons {
display: flex;
margin-top: 100px;
}
.socialicons .icon{
width: 80px;
height: 80px;
box-shadow: 0 0 5px 10px rgba(0,0,0,0.05);
margin: 0 30px;
text-align: center;
line-height: 80px;
font-size: 30px;
text-decoration: none;
color: #000;
border-radius: 50%;
position: relative;
overflow: hidden;
}
You can craft the background animation with the help of the
pseudo-element of that particular element. The animation starts on hover
over that element.
a:after {
content: '';
width: 80px;
height: 80px;
z-index: -1;
position: absolute;
bottom: -80px;
left: 0;
background: linear-gradient(to bottom, rgb(158, 0, 231), rgb(57,1,211));
transition: 0.2s;
}
.socialicons .icon:hover {
color: #fff;
}
a:hover::after {
bottom: 0;
}
Output
0 Response to "Add Social Media Buttons using CSS in your Website"
Post a Comment