Social Media Icons in Circular Alignment with Hover Effect Using HTML and CSS (Free Source Code)
Website social media icons are quite vital in the modern website design as they link the visitors to the web owners’ social pages. This concept is very eye-catching and effective, you can create a design using Social Media Icons in Circle Shape with Hover Effects Using Only HTML and CSS.
The source code of this tutorial complies with good code practice hence is easy to implement and extends. Also, it gives me great pleasure to offer this resource to you for free.
GitHub Source: Social Media Icons in Circular Alignment
Features
- Animation on Hover: The icons look good when under hover, and this makes the touch experience to be more dynamic and interactive.
- Responsive: Many of the icons are optimized for use with all types of devices and all icon sizes are scalable.
- Easy to Customize: You can easily change the color, size and other effects to fit your website design and to correspond to your company’s image.
- Compatibility: Supports all key browsers, although it should be noted that all browsers have different rendering engines which will make the app look slightly different when viewed in different browsers.
- Clean Code: The code is well written, logically and well formatted and conforms to most of the rules of web development.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
Recommended for You
- 3D Social Media Icons
- Stani’s Python Editor
- How to Create a Class in Python?
- Social Media Icons with Dual Tooltips
- Square Social Media Buttons
- Circular Social Media Buttons
Video Tutorial
HTML
Here is the HTML code for your index.html file:
<!DOCTYPE html>
<!--
======================================================
This code is developed by Shokat Javed at JV Codes
Website: www.jvcodes.com
Get Millions of Free Web UI Source Codes!
======================================================
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Media Icons with Circular Alignment with Hover Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="tooltip-container">
<span class="text">
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
class="bi bi-send-fill"
viewBox="0 0 16 16"
>
<path
d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471z"
></path>
</svg>
</span>
<span class="tooltip1">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
class="bi bi-twitter"
viewBox="0 0 16 16"
>
<path
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334q.002-.211-.006-.422A6.7 6.7 0 0 0 16 3.542a6.7 6.7 0 0 1-1.889.518 3.3 3.3 0 0 0 1.447-1.817 6.5 6.5 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.32 9.32 0 0 1-6.767-3.429 3.29 3.29 0 0 0 1.018 4.382A3.3 3.3 0 0 1 .64 6.575v.045a3.29 3.29 0 0 0 2.632 3.218 3.2 3.2 0 0 1-.865.115 3 3 0 0 1-.614-.057 3.28 3.28 0 0 0 3.067 2.277A6.6 6.6 0 0 1 .78 13.58a6 6 0 0 1-.78-.045A9.34 9.34 0 0 0 5.026 15"
></path>
</svg>
</span>
<span class="tooltip2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
class="bi bi-facebook"
viewBox="0 0 16 16"
>
<path
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"
></path>
</svg>
</span>
<span class="tooltip3">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
class="bi bi-whatsapp"
viewBox="0 0 16 16"
>
<path
d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232"
></path>
</svg>
</span>
<span class="tooltip4">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
class="bi bi-discord"
viewBox="0 0 16 16"
>
<path
d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"
></path>
</svg>
</span>
<span class="tooltip5">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
class="bi bi-pinterest"
viewBox="0 0 16 16"
>
<path
d="M8 0a8 8 0 0 0-2.915 15.452c-.07-.633-.134-1.606.027-2.297.146-.625.938-3.977.938-3.977s-.239-.479-.239-1.187c0-1.113.645-1.943 1.448-1.943.682 0 1.012.512 1.012 1.127 0 .686-.437 1.712-.663 2.663-.188.796.4 1.446 1.185 1.446 1.422 0 2.515-1.5 2.515-3.664 0-1.915-1.377-3.254-3.342-3.254-2.276 0-3.612 1.707-3.612 3.471 0 .688.265 1.425.595 1.826a.24.24 0 0 1 .056.23c-.061.252-.196.796-.222.907-.035.146-.116.177-.268.107-1-.465-1.624-1.926-1.624-3.1 0-2.523 1.834-4.84 5.286-4.84 2.775 0 4.932 1.977 4.932 4.62 0 2.757-1.739 4.976-4.151 4.976-.811 0-1.573-.421-1.834-.919l-.498 1.902c-.181.695-.669 1.566-.995 2.097A8 8 0 1 0 8 0"
></path>
</svg>
</span>
<span class="tooltip6">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M8 0C3.584 0 0 3.584 0 8s3.584 8 8 8c4.408 0 8-3.584 8-8s-3.592-8-8-8m5.284 3.688a6.8 6.8 0 0 1 1.545 4.251c-.226-.043-2.482-.503-4.755-.217-.052-.112-.096-.234-.148-.355-.139-.33-.295-.668-.451-.99 2.516-1.023 3.662-2.498 3.81-2.69zM8 1.18c1.735 0 3.323.65 4.53 1.718-.122.174-1.155 1.553-3.584 2.464-1.12-2.056-2.36-3.74-2.551-4A7 7 0 0 1 8 1.18m-2.907.642A43 43 0 0 1 7.627 5.77c-3.193.85-6.013.833-6.317.833a6.87 6.87 0 0 1 3.783-4.78zM1.163 8.01V7.8c.295.01 3.61.053 7.02-.971.199.381.381.772.555 1.162l-.27.078c-3.522 1.137-5.396 4.243-5.553 4.504a6.82 6.82 0 0 1-1.752-4.564zM8 14.837a6.8 6.8 0 0 1-4.19-1.44c.12-.252 1.509-2.924 5.361-4.269.018-.009.026-.009.044-.017a28.3 28.3 0 0 1 1.457 5.18A6.7 6.7 0 0 1 8 14.837m3.81-1.171c-.07-.417-.435-2.412-1.328-4.868 2.143-.338 4.017.217 4.251.295a6.77 6.77 0 0 1-2.924 4.573z"
></path>
</svg>
</span>
<span class="tooltip7">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
class="bi bi-github"
viewBox="0 0 16 16"
>
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"
></path>
</svg>
</span>
<span class="tooltip8">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
class="bi bi-reddit"
viewBox="0 0 16 16"
>
<path
d="M6.167 8a.83.83 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661m1.843 3.647c.315 0 1.403-.038 1.976-.611a.23.23 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83s.83-.381.83-.83a.831.831 0 0 0-1.66 0z"
></path>
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.2.2 0 0 0-.153.028.2.2 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224q-.03.17-.029.353c0 1.795 2.091 3.256 4.669 3.256s4.668-1.451 4.668-3.256c0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165"
></path>
</svg>
</span>
<span class="tooltip9"> </span>
</div>
</body>
</html>
CSS
Here is the complete code for style.css file to style the social media icons:
/*
=====================================================
This code is developed by Shokat Javed at JV Codes
Website: www.jvcodes.com
Get Millions of Free Web UI Source Codes!
=====================================================
*/
body {
background-color: #f0f8ff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #929292;
}
.tooltip-container {
background: rgb(3, 169, 244);
background: linear-gradient(
138deg,
rgba(3, 169, 244, 1) 15%,
rgba(63, 180, 233, 1) 65%
);
position: relative;
cursor: pointer;
font-size: 17px;
padding: 0.7em 0.7em;
border-radius: 50px;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.tooltip-container:hover {
background: #fff;
transition: all 0.6s;
}
.tooltip-container .text {
display: flex;
align-items: center;
justify-content: center;
fill: #fff;
transition: all 0.2s;
}
.tooltip-container:hover .text {
fill: rgb(3, 169, 244);
transition: all 0.6s;
}
.tooltip1 {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
background: #fff;
fill: #03a9f4;
padding: 10px;
border-radius: 50px;
transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
z-index: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tooltip-container:hover .tooltip1 {
top: 150%;
opacity: 1;
visibility: visible;
background: #fff;
border-radius: 50px;
transform: translate(-50%, -5px);
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-container:hover .tooltip1:hover {
background: #03a9f4;
fill: #fff;
}
.tooltip2 {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
background: #fff;
fill: #0462df;
padding: 10px;
border-radius: 50px;
transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
z-index: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tooltip-container:hover .tooltip2 {
top: -120%;
opacity: 1;
visibility: visible;
background: #fff;
transform: translate(-50%, -5px);
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-container:hover .tooltip2:hover {
background: #0462df;
fill: #fff;
}
.tooltip3 {
position: absolute;
top: 100%;
left: 60%;
transform: translateX(80%);
opacity: 0;
visibility: hidden;
background: #fff;
fill: #1db954;
padding: 10px;
border-radius: 50px;
transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
z-index: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tooltip-container:hover .tooltip3 {
top: 10%;
opacity: 1;
visibility: visible;
background: #fff;
transform: translate(85%, -5px);
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-container:hover .tooltip3:hover {
background: #1db954;
fill: #fff;
}
.tooltip4 {
position: absolute;
top: 100%;
left: -190%;
transform: translateX(70%);
opacity: 0;
visibility: hidden;
background: #fff;
fill: #8c9eff;
padding: 10px;
border-radius: 50px;
transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
z-index: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tooltip-container:hover .tooltip4 {
top: 10%;
opacity: 1;
visibility: visible;
background: #fff;
transform: translate(70%, -5px);
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-container:hover .tooltip4:hover {
background: #8c9eff;
fill: #fff;
}
.tooltip5 {
position: absolute;
top: 100%;
left: -145%;
transform: translateX(70%);
opacity: 0;
visibility: hidden;
background: #fff;
fill: #bd081c;
padding: 10px;
border-radius: 50px;
transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
z-index: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tooltip-container:hover .tooltip5 {
top: -78%;
opacity: 1;
visibility: visible;
background: #fff;
transform: translate(70%, -5px);
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-container:hover .tooltip5:hover {
background: #bd081c;
fill: #fff;
}
.tooltip6 {
position: absolute;
top: 100%;
left: 35%;
transform: translateX(70%);
opacity: 0;
visibility: hidden;
background: #fff;
fill: #ea4c89;
padding: 10px;
border-radius: 50px;
transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
z-index: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tooltip-container:hover .tooltip6 {
top: -79%;
opacity: 1;
visibility: visible;
background: #fff;
transform: translate(70%, -5px);
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-container:hover .tooltip6:hover {
background: #ea4c89;
fill: #fff;
}
.tooltip7 {
position: absolute;
top: 100%;
left: 39%;
transform: translateX(70%);
opacity: 0;
visibility: hidden;
background: #fff;
fill: #000;
padding: 10px;
border-radius: 50px;
transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
z-index: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tooltip-container:hover .tooltip7 {
top: 104%;
opacity: 1;
visibility: visible;
background: #fff;
transform: translate(70%, -5px);
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-container:hover .tooltip7:hover {
background: #000;
fill: #fff;
}
.tooltip8 {
position: absolute;
top: 100%;
left: -150%;
transform: translateX(70%);
opacity: 0;
visibility: hidden;
background: #fff;
fill: #ff4500;
padding: 10px;
border-radius: 50px;
transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
z-index: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tooltip-container:hover .tooltip8 {
top: 101%;
opacity: 1;
visibility: visible;
background: #fff;
transform: translate(70%, -5px);
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-container:hover .tooltip8:hover {
background: #ff4500;
fill: #fff;
}
.tooltip9 {
position: absolute;
top: 0;
left: -115%;
opacity: 0;
visibility: hidden;
width: 150px;
height: 150px;
z-index: -1;
}
.tooltip-container:hover .tooltip9 {
top: -110%;
opacity: 1;
visibility: visible;
border-radius: 50%;
z-index: -1;
}
Download Source Code
The source code of Social Media Icons in Circular Alignment with Hover Effect can be downloaded with totally without copyright issues. Click on the button below to get the code and start increasing your website performance now.
Conclusion
In the process of Creating Social Media Icons in Circular Alignment, your website will look stylish and attractive, as well as remaining functional and engaging. It is excellent for any developer starting with web development as well as developers who want to take their web development to the list of next-level websites.
You are free to use this code in your projects, also we request you to give credits to JV Source Codes for the facility provided here by linking your site to our site. More free resources are available on our channel so do not forget to subscribe, also if you have any questions or any issue do comment.
