CSS Hover Action: Here im sharing with you my project code for social media icon hovering. it's a simple and decent you can use in you...
CSS Hover Action:
Here im sharing with you my project code for social media icon hovering. it's a simple and decent you can use in your project and your website.
here is the some picture you can it and also sharing my code for it.
Picture
what is Hover ?
:Hover is the action when user interact with an element the mouse on the pointing device. it will be triggered when the user Hover specific place with cursor(mouse).
this hover action created and activated with the help of Css ( Cascading Style Sheet).
what is CSS ?
Css stand for cascading style sheet which is used in to design web pages contain html. Basically Css having 3-type.
- Inline CSS
- Internal CSS
- External CSS
- Inline CSS
Inline CSS contain property in the body section with element are know as Inline CSS.
2. Internal CSS
this type of CSS used when a single HTML document style uniquely.
3. External CSS
in this type of CSS contains separate CSS file which contains only style property with help of attributes.
Html code:
<!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">
<script src="https://unpkg.com/boxicons@latest/dist/boxicons.js"></script>
<link rel="stylesheet" href="style2.css">
<title>Document</title>
</head>
<body>
<ul>
<li><a href="#"><box-icon class="fab" type='logo' name='facebook' aria-hidden="true">
</box-icon></a> </li>
<li><a href="#"><box-icon class="fab" name='twitter' type='logo' aria-hidden="true" >
</box-icon></a></li>
<li><a href="#"><box-icon class="fab" type='logo' name='google'></box-icon></a>
</li>
<li><a href="#"><box-icon class="fab" name='linkedin' type='logo' ></box-icon></a>
</li>
<li><a href="#"><box-icon class="fab" name='instagram' type='logo' ></box-icon></a>
</li>
</ul>
</body>
</html>
*{
padding: 0;
margin: 0;
list-style: none;
}
ul{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
padding: 0;
display: flex;
}
ul li{
list-style: none;
}
ul li a{
position: relative;
width: 60px;
height: 60px;
display: block;
text-align: center;
margin: 0 10px;
border-radius: 50%;
padding: 6px;
box-sizing: border-box;
text-decoration: none;
box-shadow: 0 10px 15px rgba(0,0,0,0.3);
background: linear-gradient(0deg,#ddd,#fff);
transition: .5s;
}
ul li a:hover{
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
text-decoration: none;
}
ul li a .fab{
width: 100%;
height: 100%;
display: block;
background: linear-gradient(0deg,#fff,#ddd);
border-radius: 50%;
line-height: calc(60px-12px);
font-size: 24px;
color: #262626;
transition: .5s;
}
ul li:nth-child(1)a:hover .fab{
color: #3b5998;
Make your project and website using this icon. It will attractive anyone if love this one do comments.
No comments