Button hover animation using Html and Css only
Hello! Let's make cool Button hover animation effect using Html and Css only.
Please follow the below code and get started.
HTML Code
<body>
<div class="container">
<button class="btn">Sign up for Free</button>
</div>
</body>CSS Code
*, ::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.btn {
position: relative;
background: #FBD148;
border: 0;
outline: 0;
padding: 1rem 1.5rem;
font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: .25s ease;
}
.btn::before {
position: absolute;
content: '';
transform: translate(-5px, -5px);
width: 100%;
height: 100%;
border: 1px solid #000;
transition: .25s ease;
}
.btn:hover {
transform: translate(-5px, -5px);
}
.btn:hover::before {
transform: translate(5px, 5px);
}Output
That is all! Thank you for visiting.
Code by - AltafAlam Shaikh
Topic covered - Transform property in Css
Technology used - Html, Css