An Animation button implemented by pure css3 and a CSS 3 Implementation button

An Animation button implemented by pure css3 and a CSS 3 Implementation button

Today we will share with you an animation button that is implemented in pure css3. The buttons in the first row are switched to the background color animation after the mouse goes through, the icons fly in from the right, and the buttons in the second row are switched to the border animation when the mouse goes through, and the icons fly in on the right. The effect is very good, let's take a look:

Download Online Preview source code

Implementation code.

Html code:

<div class="black">            <a href="#" class="btn"><span>Become A Member</span> <i>&rarr;</i> </a><a href="#"                class="btn"><span>Support Us</span> <i>&rarr;</i> </a><a href="#" class="btn"><span>                    Going Down</span> <i class="down">&rarr;</i> </a><a href="#" class="btn"><span>Sign                        Up</span> <i class="up">&rarr;</i> </a>        </div>        <div class="white">            <a href="#" class="btn"><span>Become A Member</span> <i>&rarr;</i> </a><a href="#"                class="btn"><span>Support Us</span> <i>&rarr;</i> </a><a href="#" class="btn"><span>                    Going Down</span> <i class="down">&rarr;</i> </a><a href="#" class="btn"><span>Sign                        Up</span> <i class="up">&rarr;</i> </a>        </div>

Css3 code:

   body        {        }                h1        {            font-family: "Abril Titling" , Georgia, serif;            color: #f9f9f9;            letter-spacing: 1px;        }                body div        {            padding: 60px 0;            text-align: center;            height: 80px;            margin-top: 0;        }                .black        {            background: #262D28;        }                .white        {            background: #f9f9f9;        }                a        {            display: inline-block;            margin: 10px;        }                .btn        {            position: relative;            width: 160px;            padding: 1.2rem 3rem;            border: 1px solid #0AA944;            font-size: 15px;            text-decoration: none;            color: #f9f9f9;            font-family: "Tablet Gothic" , sans-serif;            text-transform: uppercase;            font-weight: 300;            letter-spacing: 1.5px;            -webkit-transition: all .2s ease-out;            -moz-transition: all .2s ease-out;            -ms-transition: all .2s ease-out;            -o-transition: all .2s ease-out;            transition: all .2s ease-out;        }                .white .btn        {            color: #262D28;            border: 2px solid #0AA944;        }                .btn span        {            position: relative;            top: 2px;            left: 0;            -webkit-transition: all .3s ease-out;            -moz-transition: all .3s ease-out;            -ms-transition: all .3s ease-out;            -o-transition: all .3s ease-out;            transition: all .3s ease-out;        }                .btn i        {            opacity: 0;            position: absolute;            margin-top: -21px;            top: 2.5rem;            left: 120%;            -webkit-transition: all .3s ease-out;            -moz-transition: all .3s ease-out;            -ms-transition: all .3s ease-out;            -o-transition: all .3s ease-out;            transition: all .3s ease-out;        }                .btn:hover        {            background: rgba(255,255,255, .9);            border: 1px solid rgba(0,0,0,1);        }                .white .btn:hover        {            background: rgba(0,0,0, .02);            border: 2px solid rgba(0,0,0,1);        }                .btn:hover span        {            color: #333;            left: -20px;        }                a.btn:hover i        {            opacity: 1;            left: 80%;            color: #333;            -webkit-transform: scale(1.2);        }                a.btn:hover .up        {            -webkit-transform: rotate(270deg);        }                a.btn:hover .down        {            -webkit-transform: rotate(90deg);        }