In the constantly evolving digital realm, the visual allure of a website plays a pivotal role in captivating and maintaining the interest of its visitors. An effective method to accomplish this is by integrating visually appealing design elements, like social media icons featuring captivating hover effects. These nuanced yet powerful additions have the potential not only to enhance the overall aesthetics of your site but also to augment user engagement. In this blog post, we’ll delve into the significance of social media icons and explore the steps to seamlessly implement hover effects that are bound to make a lasting impression.
preview
How do I create a social icon in HTML and CSS? social media icons with hover effect
The source code is available below . you can create a folder and under that folder you should create two file which is index.html and style.css . And then you can open your index.html file in any browser and see your output.
Here is HTML code ( index.html )
<!DOCTYPE html>
<html lang="en">
<head>
<!-- VISIT www.codebyrolex.com for more source code -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>social media icons - Codebyrolex</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="socials-container">
<a href="#" class="social twitter">
<svg height="1em" viewBox="0 0 512 512">
<path
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
></path>
</svg>
</a>
<a href="#" class="social facebook"
><svg height="1em" viewBox="0 0 320 512">
<path
d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"
></path></svg
></a>
<a href="#" class="social google-plus">
<svg height="1em" viewBox="0 0 640 512">
<path
d="M386.061 228.496c1.834 9.692 3.143 19.384 3.143 31.956C389.204 370.205 315.599 448 204.8 448c-106.084 0-192-85.915-192-192s85.916-192 192-192c51.864 0 95.083 18.859 128.611 50.292l-52.126 50.03c-14.145-13.621-39.028-29.599-76.485-29.599-65.484 0-118.92 54.221-118.92 121.277 0 67.056 53.436 121.277 118.92 121.277 75.961 0 104.513-54.745 108.965-82.773H204.8v-66.009h181.261zm185.406 6.437V179.2h-56.001v55.733h-55.733v56.001h55.733v55.733h56.001v-55.733H627.2v-56.001h-55.733z"
></path>
</svg>
</a>
<a href="#" class="social instagram"
><svg height="1em" viewBox="0 0 448 512">
<path
d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
></path></svg
></a>
</div>
</body>
</html>Here is CSS code ( style.css )
.socials-container {
width: fit-content;
height: fit-content;
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
padding: 20px 40px;
background-color: #333333;
position: absolute;
top: 400px;
left: 700px;
}
/* VISIT www.codebyrolex.com for more source code */
.social {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid rgb(194, 194, 194);
}
.twitter:hover {
background: linear-gradient(45deg, #66757f, #00acee, #36daff, #dbedff);
}
.facebook:hover {
background: linear-gradient(45deg, #134ac0, #316ff6, #78a3ff);
}
.google-plus:hover {
background: linear-gradient(45deg, #872419, #db4a39, #ff7061);
}
.instagram:hover {
background: #f09433;
background: -moz-linear-gradient(
45deg,
#f09433 0%,
#e6683c 25%,
#dc2743 50%,
#cc2366 75%,
#bc1888 100%
);
background: -webkit-linear-gradient(
45deg,
#f09433 0%,
#e6683c 25%,
#dc2743 50%,
#cc2366 75%,
#bc1888 100%
);
background: linear-gradient(
45deg,
#f09433 0%,
#e6683c 25%,
#dc2743 50%,
#cc2366 75%,
#bc1888 100%
);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
}
.social svg {
fill: white;
height: 20px;
}
In conclusion, integrating social media icons with hover effects is a simple yet effective way to enhance your website’s aesthetics and user engagement. By paying attention to these details, you can create a more visually appealing and interactive online presence that resonates with your audience. Elevate your website’s design, foster user trust, and encourage social media connections through the power of thoughtfully designed social media icons with hover effects.
