Binod in html and css | css hover effect on text | Binod hover effect
CSS3 Text hover Effect
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="4000">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Binod text animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="m">
B
</div>
<div class="e">
i
</div>
<div class="g">
N
</div>
<div class="a">
O
</div>
<div class="n">
D
</div>
<div class="ex">
!
</div>
</div>
</body>
</html>
CSS Code(style.css)
/* google fonts */
@import url(https://fonts.googleapis.com/css2?family=Arvo:wght@700&family=Indie+Flower&family=Playfair+Display:wght@600&family=Righteous&family=Rowdies&display=swap);
* {
transition: all 0.3s ease;
}
body {
font-family: "helvetica", sans-serif;
font-weight: bold;
font-size: 10rem;
color: white;
background: black;
}
.wrapper {
width: 100%;
margin: auto;
height: 100vh;
display: -webkit-box;
display: flex;
justify-content: center;
align-items: center;
}
.m:hover,
.e:hover,
.g:hover,
.a:hover,
.n:hover,
.ex:hover {
padding: 0 20px;
}
.m {
color: red;
font-family: "Righteous", cursive;
}
.e {
color: yellow;
font-family: "Righteous", cursive;
}
.e:hover {
color: yellow;
}
.g {
color: limegreen;
font-family: "Arvo", serif;
}
.a {
color: blue;
font-family: "Playfair Display", serif;
}
.n {
color: orchid;
font-family: "Rowdies", cursive;
}
.m:hover {
color: orchid;
background-color: red;
font-size: 14rem;
cursor: pointer;
}
.e:hover {
color: blue;
background-color: yellow;
cursor: pointer;
font-size: 14rem;
}
.g:hover {
color: lightskyblue;
background-color: limegreen;
cursor: pointer;
font-size: 14rem;
}
.a:hover {
color: yellow;
background-color: blue;
cursor: pointer;
font-size: 14rem;
}
.n:hover {
color: red;
background-color: orchid;
font-size: 14rem;
cursor: pointer;
}
.ex {
color: red;
}
.ex:hover {
background-color: red;
color: orchid;
font-size: 14rem;
cursor: pointer;
}
Comments
Post a Comment