Awesome Hover effect using html & css
Tuesday, August 11, 2020
Add Comment
Hover Effect
Hlw guys, If you love degine with html and css then this blog help you to learn better degine.
Today we learn how to make hover effect using html and css.Those code will given bellow.
HTML
<!-- This is doctype -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>This is title</title>
<link rel="stylesheet" href="card.css" type="text/css" media="all" />
<script src="https://kit.fontawesome.com/6093423242.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="btn">
<a herf="#"><i class="fa fa-laugh-wink"></i></a>
<a herf="#"><i class="fa fa-frown-open"></i></a>
</div>
</body>
</html>
_____________________
CSS
*{
margin: 0;
padding: 0;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #3D5AFE;
}
.pera{
top: 30;
height: 100px;
width: 90vw;
box-shadow: 5px 5px 7px #182466,
-5px -5px 7px #6290ff;
border-radius: 25px;
display: flex;
align-items: center;
justify-content: space-around;
background: #fff;
}
.btn{
height: 100px;
width: 90vw;
position: absolute;
margin: auto;
box-shadow: 5px 5px 7px #182466,
-5px -5px 7px #6290ff;
border-radius: 25px;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-around;
}
a{
height: 80px;
width: 80px;
border-radius: 50%;
background: linear-gradient(145deg, #4160ff, #3751e5);
box-shadow: 8px 8px 16px #22328c,
-8px -8px 16px #5883ff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 40px;
}
.fa-laugh-wink{
color: White;
}
.fa-frown-open{
color: White;
}
a:hover{
box-shadow: inset 8px 8px 16px #22328c,
inset -8px -8px 16px #5883ff;
transition: 3s;
}
a:hover .fa-laugh-wink{
color: #880E4F;
font-size: 50px;
transition: 3s;
}
a:hover .fa-frown-open{
color: rgb(24, 255, 255);
font-size: 50px;
transition: 3s;
}
Thank you so much 💛
Related Posts
- PUBG Mobile Cheer Park
- Best Hosting & Domain for your website increase web speed
- Xiaomi Redmi K20 finally starts getting Android 10 update with MIUI 11 in India, fixes more bugs
- Best shadow degine using html and css
- XIAOMI MI 10 PRO+ IS COMING WITH 12X OPTICAL ZOOM AND 120HZ DISPLAY Cheak it
- If i buy Redmi note 7 for gaming🤔
Subscribe Our Newsletter
0 Comments to "Awesome Hover effect using html & css"
Post a Comment
Thank you so much!