Create an ultra-stylish set of animated button effects using CSS3

With the new features of CSS3, we have greatly increased the likelihood of creating good interactions and effects. In this article, I would like to share with you some CSS3 animation button effects. Our idea is to create a number of animated link elements with different styles, animated and active when hovering over the mouse.

Effects Demo Plugin Download

HTML Sample code:

<a href= "#" class= "a-btn" >    <span class= "A-btn-slide-text" >$29</span>        <span class=" A-btn-text "><small>available on the Apple</small > App store</span>     <span class= "A-btn-icon-right" ><span></span></span></a >

CSS Sample code:

. a-btn{background:linear-gradient (top, #a9db80 0, #96c56f 100%);    padding-left:90px;    padding-right:105px;    height:90px;    Display:inline-block;    position:relative;    border:1px solid #80ab5d;    box-shadow:0px 1px 1px rgba (255,255,255,0.8) inset, 1px 1px 3px rgba (0,0,0,0.2);    border-radius:4px;    Float:left;    Clear:both;    margin:10px 0px;    Overflow:hidden; Transition:box-shadow 0.3s ease-in-out;}.    A-btn img{Position:absolute;    left:15px;    top:13px;    Border:none; Transition:all 0.3s ease-in-out;}.    A-btn. a-btn-slide-text{Position:absolute;    font-size:36px;    top:18px;    left:18px;    Color: #6d954e;    opacity:0;    text-shadow:0px 1px 1px rgba (255,255,255,0.4); Transition:opacity 0.2s ease-in-out;}.    a-btn-text{padding-top:13px;    Display:block;    font-size:30px; text-shadow:0px-1px 1px #80ab5d;}.    A-btn-text small{Display:block;    font-size:11px; letter-spacing:1px;}. A-btn-icon-right{Position:absolute;    right:0px;    top:0px;    height:100%;    width:80px;    border-left:1px solid #80ab5d; box-shadow:1px 0px 1px rgba (255,255,255,0.4) inset;}.    A-btn-icon-right span{width:38px;    height:38px;    opacity:0.7;    border-radius:20px;    Position:absolute;    left:50%;    top:50%;    margin: -20px 0px 0px-20px;    border:1px solid Rgba (0,0,0,0.5); Background: #4e5c50 URL (...    /images/arrow_down.png) No-repeat Center Center;    box-shadow:0px 1px 1px rgba (255,255,255,0.3) inset, 0px 1px 2px rgba (255,255,255,0.5); Transition:all 0.3s Ease-in-out;}

　

Related articles that may be of interest to you

• Web development in a very practical 10 effects "source Download"
• Carefully selected excellent jquery Ajax page plug-ins and tutorials
• 12 Amazing ideas for 404 error page Design
• Let the website Move! 12 Excellent jQuery animation plugins
• Stunning 8 x HTML5 & JavaScript Effects

This article links: Learn to use CSS3 to make a beautiful set of animation button effect

Compilation Source: Dream Sky focus on front-end development technology sharing web design resources

Create an ultra-stylish set of animated button effects using CSS3