Maison > interface Web > tutoriel HTML > 一款纯css3实现的动画按钮_html/css_WEB-ITnose

一款纯css3实现的动画按钮_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:54:07
original
986 Les gens l'ont consulté

今天给大家分享一款纯css3实现的动画按钮。第一排的按钮当鼠标经过的背景色动画切换,图标从右侧飞入,第二排的按钮当鼠标经过的时候边框动画切换,图标右侧飞入,效果非常好,一起看下效果图:

在线预览   源码下载

实现的代码。

html代码:

<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>
Copier après la connexion

css3代码:

   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);        }
Copier après la connexion

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal