CSS Button animation on Hover

byCodingFlicks -June 11, 2022

0

A web page contains one or more buttons. We call them call-to-action buttons. If we keep the design of the buttons simple, there’s no problem. But if we use some animation on hover then it'll increase the acceptance of users a little more. We'll now share a snippet showing the animation of a button hover. You can see what the snippet will look like from the video below.

I hope you have seen the video demo of this CSS animation example. The buttons make up the most important part of a website. A good user experience can be created with the help of them. A lot of things can be done with buttons, for example, navigation, Signing up, logging in, Downloading, etc. Buttons can also be used to make your site more user-friendly.

In this snippet, we have created a simple button. Then we added a curtain-like hover animation to it. First, we have created a container div and put a button div in it. We used the CSS display grid property to bring content to the center of the viewport. Then we gave the main button the absolute position and the overflow hidden value so that the animation occur within the button. Then we took the left value '-100%' for the pseudo-element of the button. For the hover state, the left value will be a zero which means the pseudo-element will cover the button's space.

You may also like:

CSS3 Animated Button [ Source Code ]:

You should create one HTML and one CSS file and link the external CSS file with your HTML File. You can copy the code from the boxes below and paste it into your project. If you open it on your browser, you can see if it's working or not. Adding more features to it will make it more interesting.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--codingflicks.com-->
<head>
	<meta charset="UTF-8">
	<title>CSS3 Animated Button</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<div class="btn">
			<div class="single-btn">
				<a href="#"><span>Contact Us</span></a>
			</div>
		</div>
	</div>
</body>
</html>

ADD CSS:

body {
	margin: 0;
	padding: 0;
	background: #344360;
}
.container {
	display: grid;
	place-items: center;
	height: 100vh;
}
.single-btn a {
	position: absolute;
	font-size: 24px;
	text-decoration: none;
	padding: 15px 50px;
	overflow: hidden;
	transform: translate(-40%, -20%);
	font-family: montserrat;
	background: #344360;
	border: 2px solid #fff;
}
.single-btn a:before {
	content: '';
	position: absolute;
	transition: .4s ease-in-out;
	height: 100%;
	background: #fff;
	top: 0;
	left: -100%;
	width: 100%;
}
.single-btn a:hover:before {
	left: 0;
	z-index: -1;
}
.single-btn a span {
	color: #fff;
	transition: .4s ease-in-out;
	z-index: 1;
}
.single-btn a:hover span {
	color: #344360;
}

We are hoping that you have implemented the code. On our website, we frequently publish source codes related to the frontend development. You are welcome to visit our website if you think that you need them. Please share the articles of this blog and follow us on our social media profiles. We would like to thank you for coming to our website.

Please do not enter any spam link in the comment box.