CSS Icon Hover Effects Gradient Drop Shadow
CSS Icon Hover Effects with Text And Gradient Drop Shadow.
Dear Friends, today you will learn how to design social media icons with a gradient hover effect using only HTML and CSS3 in this article.
We may easily make these kinds of lovely gradient buttons or icons using basic CSS. If you’re just learning CSS, it won’t be a problem for you to build these kind of icons as long as you have a basic understanding of CSS Animation and Colors.
Source Code:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Icon Hover Effects</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li style="--i:#a955ff;--j:#ea51ff;">
<span class="icon"><ion-icon name="home-outline"></ion-icon></span>
<span class="title">Home</span>
</li>
<li style="--i:#56CCF2;--j:#2F80ED;">
<span class="icon"><ion-icon name="chatbubble-outline"></ion-icon></span>
<span class="title">Messages</span>
</li>
<li style="--i:#FF9966;--j:#FF5E62;">
<span class="icon"><ion-icon name="heart-outline"></ion-icon></span>
<span class="title">Favourite</span>
</li>
<li style="--i:#80FF72;--j:#7EE8FA;">
<span class="icon"><ion-icon name="videocam-outline"></ion-icon></span>
<span class="title">Videos</span>
</li>
<li style="--i:#ffa9c6;--j:#f434e2;">
<span class="icon"><ion-icon name="camera-outline"></ion-icon></span>
<span class="title">Photos</span>
</li>
</ul>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
Another HTML CSS Article For You 👇
CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
ul
{
position: relative;
display: flex;
gap: 25px;
}
ul li
{
position: relative;
list-style: none;
width: 60px;
height: 60px;
background: #fff;
border-radius: 60px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
transition: 0.5s;
}
ul li:hover
{
width: 180px;
box-shadow: 0 10px 25px rgba(0,0,0,0);
}
ul li::before
{
content: '';
position: absolute;
inset: 0;
border-radius: 60px;
background: linear-gradient(45deg,var(--i),var(--j));
opacity: 0;
transition: 0.5s;
}
ul li:hover::before
{
opacity: 1;
}
ul li::after
{
content: '';
position: absolute;
top: 10px;
width: 100%;
height: 100%;
border-radius: 60px;
background: linear-gradient(45deg,var(--i),var(--j));
transition: 0.5s;
filter: blur(15px);
z-index: -1;
opacity: 0;
}
ul li:hover::after
{
opacity: 0.5;
}
ul li ion-icon
{
color: #777;
font-size: 1.75em;
transition: 0.5s;
transition-delay: 0.25s;
}
ul li:hover ion-icon
{
transform: scale(0);
color: #fff;
transition-delay: 0s;
}
ul li span
{
position: absolute;
}
ul li .title
{
color: #fff;
font-size: 1.1em;
text-transform: uppercase;
letter-spacing: 0.1em;
transform: scale(0);
transition: 0.5s;
transition-delay: 0s;
}
ul li:hover .title
{
transform: scale(1);
transition-delay: 0.25s;
}
