Hi, guys I am back with another fantastic project in this project I created a Social Share Icon with a hover effect Using HTML and CSS only.
I also give my readers and followers the full source code for this project at no cost there is no need to subscribe. These code files are free to download and use.
Social Share Icon
Social share icons are small graphical symbols or buttons on a website that allow users to easily share content on various social media platforms. These icons typically represent popular social networks such as Facebook, Twitter, Instagram, LinkedIn, Pinterest, and others.
When a user clicks on a social share icon, it opens a window or prompt that enables them to share the webpage or specific content on their chosen social media platform.
Social share icons are a common feature in web design and content management systems, serving to enhance the reach and visibility of content by leveraging social networks.
They play a crucial role in content dissemination, allowing users to share interesting articles, images, or other media with their social circles with just a click. Incorporating social share icons is a strategy to encourage user engagement and increase the potential for content to go viral across social media platforms.
What is the Hover Effect?
A hover effect is a visual or interactive change that occurs when a user hovers their cursor over an element on a website, such as text, an image, or a button. This effect is often used to enhance user experience by providing feedback or making the interface more dynamic. Common hover effects include changes in color, size, transparency, or the addition of animations.
For example, a button may change its color when a user hovers over it, indicating that it is interactive. Similarly, a navigation menu item might underline or highlight itself when hovered over. Hover effects are frequently implemented using CSS (Cascading Style Sheets) to define how the appearance of an element should change in response to a hover event.
Overall, hover effects contribute to the interactivity and visual appeal of a website, providing users with cues about the interactive elements on a page and making the overall user interface more engaging.
About This Project
This project was created by the Code Hunter team to help students learn coding and programming. If you want to join our team please follow us on Instagram.
| Created by | Code Hunter |
| Languages | HTML and CSS |
| Source Code | Available Below |
| Preview | Take Preview |
| GitHub Link | Code Link |
How to Create an Animated Social Share Icon
There are some steps to create this type of Soical Share Icon Using HTML, and CSS, that is given below.
- The first step is to create one folder.
- Open this folder in Vs Code Editor and create two (2) files in HTML and CSS.
- Make sure the HTML file extension is (.html), the CSS file extension is (.css).
- After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
- The last step is copying and pasting the given code into your files.
Video Tutorial
If you want to learn more about this project please watch this video and also subscribe to this YouTube channel for more content like this. This video is provided by Sona Coder.
Animated Social Share Icon Using HTML and CSS – Source Code
HTML FILE
<!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>Document</title>
<!-- font awesome cdn -->
<script src="https://kit.fontawesome.com/46b7ceee20.js" crossorigin="anonymous"></script>
<!-- custome css file -->
<link rel="stylesheet" href="style.css">
</head>
<style>
</style>
<body>
<div class="social-icon-list">
<div class="icon-group">
<i class="fab fa-facebook"></i>
<span class="icon-text">
Facebook
</span>
<span class="icon-bg"></span>
</div>
<div class="icon-group">
<i class="fab fa-twitter"></i>
<span class="icon-text">
Twitter
</span>
<span class="icon-bg"></span>
</div>
<div class="icon-group">
<i class="fab fa-whatsapp"></i>
<span class="icon-text">
whatsapp
</span>
<span class="icon-bg"></span>
</div>
<div class="icon-group">
<i class="fab fa-youtube"></i>
<span class="icon-text">
Youtube
</span>
<span class="icon-bg"></span>
</div>
</div>
</body>
</html>
CSS FILE
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;900&display=swap');
:root{
--facebook-color:#1778F2;
--twitter-color:#1Da1f2;
--whatsapp-color:#25D366;
--youtube-color:#f00;
--container-shadow:2.3px 2.3px 1.9px rgba(0, 0, 0, 0.035),5.4px 5.4px 4.3px rgba(0, 0, 0, 0.048),9.7px 9.7px 7.7px rgba(0, 0, 0, 0.054),16.1px 16.1px 12.8px rgba(0, 0, 0, 0.057),26.5px 26.5px 21.2px rgba(0, 0, 0, 0.062),46.2px 46.2px 37px rgba(0, 0, 0, 0.073),100px 100px 80px rgba(0, 0, 0, 0.12);
}
*,
::before,
::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: "Poppins";
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.social-icon-list{
height: 100px;
width: 500px;
border: 1px solid #000;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: var(--container-shadow);
}
.icon-group{
height: 50px;
width: 60px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
cursor: pointer;
position: relative;
transition: all 1s ease;
}
.icon-group:hover{
width: 200px;
justify-content: space-around;
}
.icon-group:nth-child(1) {
border: 2px solid var(--facebook-color);
}
.icon-group:nth-child(2) {
border: 2px solid var(--twitter-color);
}
.icon-group:nth-child(3) {
border: 2px solid var(--whatsapp-color);
}
.icon-group:nth-child(4) {
border: 2px solid var(--youtube-color);
}
.icon-group:hover i,
.icon-group:hover .icon-text{
color: #fff;
}
.icon-group .icon-text{
width: 0;
overflow: hidden;
}
.icon-group:hover .icon-text{
width: fit-content;
transition: width 1s ease;
}
.icon-group i,
.icon-group .icon-text{
z-index: 2;
}
.icon-group .icon-bg{
position: absolute;
height: 100%;
width: 100%;
border-radius: 10px;
clip-path: circle(50% at -100% 50%);
z-index: 1;
}
.icon-group:hover .icon-bg{
clip-path: circle(150% at 0% 50%);
transition: all 1s ease;
}
.icon-group:nth-child(1) .icon-bg{
background-color: var(--facebook-color);
}
.icon-group:nth-child(2) .icon-bg{
background-color: var(--twitter-color);
}
.icon-group:nth-child(3) .icon-bg{
background-color: var(--whatsapp-color);
}
.icon-group:nth-child(4) .icon-bg{
background-color: var(--youtube-color);
}
You Might Like This:
- How To Create a Profile Card Using HTML and CSS – Complete Source Code
- How To Create a Modern Drop-Down Menu Using HTML, CSS, and JavaScript
- Build an Interactive Responsive Navigation Bar with HTML, CSS, and JS – Free Source Code
Final Words
Mastering the art of creating animated social icons with hover effects using HTML and CSS adds a captivating dimension to web design. This tutorial has equipped readers with the skills to infuse life into static icons, making them dynamically respond to user interaction.
By incorporating subtle animations and visual transformations during hover events, designers can create a more engaging and interactive user experience.
The step-by-step guide, along with the use of HTML and CSS, provides a user-friendly approach to implementing these effects, enabling both beginners and seasoned developers to enhance their websites with visually appealing and responsive social icons.
As social engagement becomes increasingly important, these animated hover effects serve not only as aesthetic enhancements but also as strategic tools for encouraging user interaction and sharing across various digital platforms.