Hey friends, today in this blog you'll learn how to create a cool button background animation only using HTML and CSS. In our last blog, we saw how to create amazing glowing buttons using HTML and CSS.Now it's time to create a cool button with background animation. I've also shared many button designs. Don't forget to check here.
A button is a fundamental UI element of web pages that play an important role to provide interactions to the user. Mainly it is used for submitting forms, confirming actions, etc. That's why buttons are the middleman between the user and the product.
Today in this blog, I'll share this cool button with animated background. At first, these buttons are in normal background color but when you hover over them then a black background comes from the left side and covers the whole button with smooth animation.
Preview is available here.
Source Code
HTML Code
<!-- ------------------- Created By InCoder ------------------- -->
<!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">
<title>Cool Button Background Animation - InCoder</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<a href="#" class="inBtn inBtn-green mr-3">Submit</a>
<a href="#" class="inBtn inBtn-red">Submit</a>
</div>
</body>
</html>
CSS Code
/* ------------------- Created By InCoder ------------------- */
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #e6e6e6;
}
.wrapper {
width: 30rem;
display: flex;
height: 15rem;
margin: 2rem 1rem;
border-radius: 8px;
align-items: center;
background-color: #fff;
justify-content: center;
transition: box-shadow 0.2s;
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.1);
}
.wrapper:hover {
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2);
}
.inBtn {
border: 0px;
z-index: 1;
color: #fff;
overflow: hidden;
font-size: 1.2rem;
position: relative;
border-radius: 6px;
padding: 0.8rem 2rem;
text-decoration: none;
background-position: 5rem;
text-transform: capitalize;
}
.inBtn::before {
content: "";
top: 0%;
left: -100%;
z-index: -1;
width: 100%;
height: 100%;
color: #fff;
position: absolute;
transition: left 0.4s;
background-color: #202020;
}
.inBtn:hover::before {
left: 0%;
}
.mr-3 {
margin-right: 20px;
}
.inBtn-green {
background-color: #22ba87;
}
.inBtn-red {
background-color: #e03652;
}
Top comments (0)