一款基于css3的动画按钮_html/css_WEB-ITnose

之前为大家分享了 推荐10款纯css3实现的实用按钮。今天给大家带来一款基于css3的动画按钮。实现的效果图如下：

在线预览   源码下载

实现的代码。

html代码：

 <div class="share-buttons">        <div class="share-button">            <div class="share-button-secondary">                <div class="share-button-secondary-content">                    share on twitter                </div>            </div>            <div class="share-button-primary">                <i class="share-button-icon fa fa-twitter"></i>            </div>        </div>        <div class="share-button">            <div class="share-button-secondary">                <div class="share-button-secondary-content">                    share on facebook                </div>            </div>            <div class="share-button-primary">                <i class="share-button-icon fa fa-facebook"></i>            </div>        </div>        <div class="share-button">            <div class="share-button-secondary">                <div class="share-button-secondary-content">                    pin on pinterest                </div>            </div>            <div class="share-button-primary">                <i class="share-button-icon fa fa-pinterest"></i>            </div>        </div>        <div class="share-button">            <div class="share-button-secondary">                <div class="share-button-secondary-content">                    share on tumblr                </div>            </div>            <div class="share-button-primary">                <i class="share-button-icon fa fa-tumblr"></i>            </div>        </div>        <div class="share-button">            <div class="share-button-secondary">                <div class="share-button-secondary-content">                    share on google+                </div>            </div>            <div class="share-button-primary">                <i class="share-button-icon fa fa-google-plus"></i>            </div>        </div>    </div>

css3代码：

  body        {            background: -webkit-linear-gradient(0deg, #FF8008 10%, #FFC837 90%);            background: linear-gradient(90deg, #FF8008 10%, #FFC837 90%);            padding: 2em;            text-align: center;        }                *        {            -moz-box-sizing: border-box;            box-sizing: border-box;        }                .share-buttons        {            position: absolute;            width: 300px;            height: 212px;            padding-left: 135px;            top: 50%;            left: 50%;            margin-left: -150px;            margin-top: -106px;        }        .share-buttons .share-button        {            float: left;            margin-top: 15px;        }        .share-buttons .share-button:first-child        {            margin-top: 0;        }        .share-buttons .share-button:after        {            clear: both;            display: table;        }                .share-button        {            display: block;            position: relative;            height: 30px;        }        .share-button:hover        {            cursor: pointer;        }        .share-button:hover .share-button-primary        {            box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.1);        }        .share-button:hover .share-button-secondary-content        {            -webkit-transform: translate3d(0, 0, 0);            transform: translate3d(0, 0, 0);        }                .share-button-primary        {            position: absolute;            background: #fff;            width: 30px;            height: 30px;            border-radius: 15px;            left: 0;            top: 50%;            margin-top: -15px;        }                .share-button-icon        {            display: block;            color: #242424;            position: absolute;            width: 30px;            line-height: 30px;            font-size: 16px;            margin-top: 1px;        }                .share-button-secondary        {            overflow: hidden;            margin-left: 15px;            height: 30px;        }                .share-button-secondary-content        {            font-family: sans-serif;            font-size: .75em;            background: #fff;            display: block;            height: 30px;            text-align: left;            padding-left: 24px;            padding-right: 18px;            line-height: 30px;            color: #242424;            border-radius: 0 15px 15px 0;            -webkit-transform: translate3d(-100%, 0, 0);            transform: translate3d(-100%, 0, 0);            -webkit-transition: -webkit-transform 175ms ease;            transition: transform 175ms ease;        }