<!DOCTYPE html>
<html>
<head>
<title>Hover Effect</title>
<style>
body{
padding :10rem;
display:flex;
}
.btn1{
text-decoration: none;
text-align: center;
color: white;
background: blue;
padding:0.5rem 1rem;
font-weight:bolder;
border-radius:0.3rem;
cursor: pointer;
box-shadow: 0px 0px 0px 0px;
transition-duration:0.3s;
}
.btn1:hover{
box-shadow: 0px 0px 3px 5px #888888;
transform:scale(1.2);
}
</style>
</head>
<body>
<a href="#" class="btn1">HOVER</a>
</body>
</html>
OUTPUT
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
span#icons{
font-size:30px;
color: white;
transition:3s;
word-spacing:20px;
}
.fa-facebook:hover{
color:white;
background:blue;
padding:10px 15px;
border-radius:25px;
}
.fa-instagram:hover{
color: #fd1d1d;
}
.fa-twitter:hover{
color:#00acee;
}
.fa-pinterest:hover{
color:red;
}
.fa-youtube:hover{
color:red;
}
i{
cursor:pointer;
margin-top:50px;
margin-left:20px;
}
i:hover{
transform: translateY(-10px);
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body bgcolor="skyblue">
<span id="icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-youtube"></i>
</span>
</body>
</html>
OUTPUT
Comments
Post a Comment