How to make animated buttons using CSS3

Here is a nice code for creating modern buttons using CSS3, the latest version of the Cascading Style Sheets (CSS) specification. Below you can found both HTML and CSS code and also option for viewing the online demo. Besides that you can download the complete code as a zip file by using the download button at bottom of post.

CSS

 
	/* buttons-wrapper */
	.button-wrapper{
		width:30%;
		margin: 0 auto;
		padding: 20px 0;
	}
	/* buttons */
	.bttn-animated{
		float:left;
		position:relative;
		padding-left:90px;
		padding-right:105px;
		height:80px;
		display:inline-block;
		border-radius:2px;
		clear:both;
		margin:10px 0px;
		overflow:hidden;
		transition:box-shadow 0.3s ease-in-out;
	}
	.bttn-animated img{
		position:absolute;
		left:15px;
		top:8px;
		border:none;
		transition:all 0.3s ease-in-out;
	}
	.bttn-animated .bttn-animated-slide-text{
		position:absolute;
		font-size:36px;
		top:8px;
		left:18px;
		color: #FFCC00;
		opacity:0;
		transition:opacity 0.2s ease-in-out;
	}
	.bttn-animated-text{
		padding-top:10px;
		display:block;
		font-size:20px;
		color:#fff;
		font-weight:400;
		text-shadow:0px -1px 1px #222;
	}
	.bttn-animated-text small{
		display:block;
		font-size:11px;
		letter-spacing:1px;
	}
	.bttn-animated-txt-right{
		position:absolute;
		right:0px;
		top:0px;
		height:100%;
		width:80px;
		border-left:1px solid #5e2277;
	}
	.bttn-animated-txt-right span{
		width:38px;
		height:38px;
		opacity:0.7;
		border-radius:2px;
		position:absolute;
		left:45%;
		top:55%;
		color: #fff;
		font-size:18px;
		margin:-20px 0px 0px -20px;
		transition:all 0.3s ease-in-out;
	}
	.bttn-animated:hover img{
		transform:scale(10);
		opacity:0;
	}
	.bttn-animated:hover .bttn-animated-slide-text,
	.bttn-animated:hover .bttn-animated-txt-right span{
		opacity:1;
	}
	.bttn-animated:active{
		position:relative;
		top:1px;
		background:#ba55e3;
		border-color:#9b59b6;
	}
	.bttn-animated:active .bttn-animated-txt-right span{
		transform:scale(1.4);
	}
	.violet{
		background:#9b59b6;
		border:1px solid #5b2870;
	}
	.blue{
		background:#2a7fb8;
		border:1px solid #225e86;
	}
	.violet-light{
		background:#666699;
		border:1px solid #4a4a76;
	}
	.black{
		background:#5aa7f5;
		border:1px solid #3c92e9;
	}

HTML

 
		<!-- buttons -->
				<div class="button-wrapper">
 
					<a href="#" class="bttn-animated violet">
						<span class="bttn-animated-slide-text">+</span>
						<img src="images/wpicon-01.png" alt="Icons" />
						<span class="bttn-animated-text"><small>WP Theme for</small> Restaurant</span> 
						<span class="bttn-animated-txt-right"><span>more</span></span>
					</a>
					<a href="#" class="bttn-animated blue">
						<span class="bttn-animated-slide-text">+</span>
						<img src="images/wpicon-01.png" alt="Icons" />
						<span class="bttn-animated-text"><small>WP Theme for</small> Restaurant</span> 
						<span class="bttn-animated-txt-right"><span>more</span></span>
					</a>
					<a href="#" class="bttn-animated violet-light">
						<span class="bttn-animated-slide-text">+</span>
						<img src="images/wpicon-01.png" alt="Icons" />
						<span class="bttn-animated-text"><small>WP Theme for</small> Restaurant</span> 
						<span class="bttn-animated-txt-right"><span>more</span></span>
					</a>
					<a href="#" class="bttn-animated black">
						<span class="bttn-animated-slide-text">+</span>
						<img src="images/wpicon-01.png" alt="Icons" />
						<span class="bttn-animated-text"><small>WP Theme for</small> Restaurant</span> 
						<span class="bttn-animated-txt-right"><span>more</span></span>
					</a>
 
 
				</div>

Live Demo Download

Tags: , ,

Related posts:

Topics
Quick Links

Partner with Us

We are providing an exclusive partnership offer to individuals and companies who are interested in setting up their own web design & development company. For more information about how to partner with us, please contact us