Reading time: < 1 minute
Good afternoon, everyone! In today’s post, I’m going to share a cool animation with you. It demonstrates what you can achieve with simple div elements.
<!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">
<link rel="stylesheet" href="style.css" type="text/css" />
<title>DevCodeLight</title>
</head>
<body>
<div id="m"><span>M</span></div>
<div id="a"><span>A</span></div>
<div id="y"><span>Y</span></div>
<div id="o"><span>O</span></div>
</body>
</html>
body {
margin: 90px;
padding: 0px;
}
#m, #a, #y, #o {
margin-left: 20px;
display: flex;
align-items: center;
position: relative;
float:left;
width: 70px;
height: 30px;
border-radius: 40%;
background-color:#33cdf3;
box-shadow: 0 5px 1px 0 black;
}
span {
margin-left: 40%;
}
#m:hover, #a:hover, #y:hover, #o:hover {
margin-top: 5px;
background-color:#279BB8;
box-shadow: none;
transition: 1s;
}
Here’s the result. As you can see, when you hover over each element, it creates an animation as if you were pressing a button, and the color of the button changes.
Hope you like it! 😊
Reading time: < 1 minute
Good afternoon, everyone! In today’s post, I’m going to share a cool animation with you. It demonstrates what you can achieve with simple div elements.
<!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">
<link rel="stylesheet" href="style.css" type="text/css" />
<title>DevCodeLight</title>
</head>
<body>
<div id="m"><span>M</span></div>
<div id="a"><span>A</span></div>
<div id="y"><span>Y</span></div>
<div id="o"><span>O</span></div>
</body>
</html>
body {
margin: 90px;
padding: 0px;
}
#m, #a, #y, #o {
margin-left: 20px;
display: flex;
align-items: center;
position: relative;
float:left;
width: 70px;
height: 30px;
border-radius: 40%;
background-color:#33cdf3;
box-shadow: 0 5px 1px 0 black;
}
span {
margin-left: 40%;
}
#m:hover, #a:hover, #y:hover, #o:hover {
margin-top: 5px;
background-color:#279BB8;
box-shadow: none;
transition: 1s;
}
Here’s the result. As you can see, when you hover over each element, it creates an animation as if you were pressing a button, and the color of the button changes.
Hope you like it! 😊
