I have created 30 CSS button hover effects that uses only CSS for the animation. In this tutorial I will only explain how the sixth example works. You can view the code for the rest of the buttons by downloading the source code.

Be careful not to ruin your website design and make sure you are using the buttons that fit your design the most. Some of the effects are quite, let's call them 'dramatic' and those effects may be suited for a page where you only have 1 button or just a few.

The animations are very easy to customize since they are made out of just CSS. Let's get started explaining the sixth example.

HTML

Let's make the first button of the sixth example.

<div class="wrapper-inner-tab-backgrounds-first">
<div class="sim-button button6">
<span>Login</span>
</div>
</div>

Inside the '.button6' class the text is wrapped in a span. The span is essential for the effect to work properly.

CSS

First we have to create the usual set of styles for a button. One important thing is the relative position which will help to hold the other elements.

.button6{
	color: rgba(255,255,255,1);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	border: 1px solid rgba(255,255,255,0.5);
	position: relative;	
}
.button6 a{
	color: rgba(51,51,51,1);
	text-decoration: none;
	display: block;
}

The span has an absolute position because i want the text inside the button to float above the next element.

.button6 span{
	z-index: 2;	
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;	
}

I have created a 'before' selector this will be the element that generates the effect. The element will have an absolute position, an initial size of half of the total size and the opacity set to 0. We will create the effect by making the element scale to the full size and setting the opacity to 100%.

.button6::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	background-color: rgba(255,255,255,0.5);
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	-webkit-transform: scale(0.5, 1);
	transform: scale(0.5, 1);
}
.button6:hover::before{
	opacity: 1;
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}

5 Comments

Would you like to share your thoughts?

Name:*

Email:*

Website:

Message:*

Fields marked with * are mandatory. We don't share your email with anyone. Email provided in the above fields are used for identification only. If you chose to subscribe to our newsletter you can cancel at any time.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.