一款基于css3的动画按钮

浏览数：38 / 时间：2015年06月09日

之前为大家分享了推荐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;
        }