Simple CSS3 button transition

Posted under :
Download the script Check the demo

In this tutorial we will go back to the basic CSS3 button Transition to create a beautiful, nice looking button.

If you will download the script, you will 2 types of code, the first one will including a ready to use box that you can include directly to your website, the second is what present the point of this tutorial with simple CSS3 button Transition.

CSS3 Transition

So, let’s start from here, in the end of this tutorial you will understand and you will be able to create more complexe example with the transition and CSS animation.

The point technically is the animate 2 icons when we hover the mouse on a box. Simple, right?

first, we will create 2 files in this script :

  • Index.html
  • style.css

Then we will be using the Font Awesome as our icon’s library.

In the index.html file we will incluse our stylesheet and the fontAwesome as it show below :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/buttons-transition.css">

The animated button will include 2 icons, one will be shown on the first step, the other will take the place of the first one when the mouse is passing on the button.




<div class="wcdBtnCnt wcdBtnRed">
    <i class="fa fa-arrow-right secon"></i>
    <i class="fa fa-newspaper-o prim"></i>
</div>



Now we will work on our style.css, its where all the magic happens
You can notice that gave a class for the button wcdBtnCnt wcdBtnRed
and the icons inside as .secon & .prim.

Here we will set the size of the button, and we will wake look rounded, to look like a cercle and specify its background color:

.wcdBtnCnt{
	float: left; margin-right:20px;
	width: 40px; height: 40px;
	border-radius: 100%; 
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.wcdBtnRed{
	background-color: #ff6351;
}

Now we will apply the style on our icons, so the first one will be shown in the center of the cercle, the second will be outside in the left of the cercle.

.wcdBtnCnt > i{
	position: absolute;
	font-size: 1.4em;
	line-height: 40px;
	color: #fff;
	display: block;
	text-align: center;
	transition-property: left, opacity;
  	transition-duration: 0.3s
}
.wcdBtnCnt > i.secon{
	left:-100%; 
  	opacity: 0%;
}
.wcdBtnCnt > i.prim{
	left:0; right: 0; 
	margin-left: auto; margin-right: auto;
}

Notice that we used the css3 transition transition-property and here means that its applied to the Left & Opacity changes that we will the selector will have (in our case is the :hover), so as simple as it looks, we did prepared our icons for the animation and we set the duration of it to 0.4second.
Other parameters can be applied to the transition as this syntax (but now let’s make something simple:

transition:  [ <transition-property> ||
               <transition-duration> ||
               <transition-timing-function> ||
               <transition-delay> ]

If you done this, you will realize that the arrow icon (.secon) is missing! that’s fine its just being hidden as we are using overflow:hidden; for the cercle, so anything out of it will be hidden.

Now we need some action to finish this, when we hover the cercle :
– The newspaper icon go right out of the cercle
– The arrow go inside the cercle and take the place of the newspaper icon
Let’s do that with our CSS

.wcdBtnCnt:hover i.prim{
	left:150%;
	opacity: 0;
}
.wcdBtnCnt:hover i.secon{
	left:0; right: 0; margin-left: auto; margin-right: auto;
	opacity: 1;
}

Et voila, this is simple easy to code, easy to learn!
The point of this Tutorial is to start from a really simple Animation using CSS, note that like we used the left & opacity transition properties, we can apply many properties too, check the Full animatable properties list



Be notified for new scripts