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
Subscribe Our Newsletter
0 Comments to "Awesome Hover effect using html & css"
Post a Comment
Thank you so much!