An animated button implemented in pure css3_html/css_WEB-ITnose

Today I will share with you an animated button implemented purely in CSS3. The buttons in the first row animate the background color when the mouse passes over, and the icons fly in from the right. The buttons in the second row animate the borders when the mouse passes over, and the icons fly in from the right. The effect is very good. Let’s take a look at the renderings. :

Online preview Source code download

Implemented 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);        }