How to make animated buttons using CSS3
Filed under Labs
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
Posts you may like:
Disable text selection and right click on website – trick with code
This post explains how to protect a webpage from copying pages contents including text and …
Quick ways to improve your site’s position in Google
Page ranking by Google depends on multiple factors. Actually this is a trade secrets of …
Small online SEO tools for websites
Here is some small online tools for analyzing a website. This tools includes Blacklist checker, …
How to create collapse sidebar in html5 with css3
Here is an example of creating collapse sidebar using html5 with css3. This is something …
CSS media queries with skeleton framework
Cascading Style Sheets (CSS) are one of the important part of web design, without a …