一款基於css3的動畫按鈕

標籤：style   blog   http   io   ar   color   os   sp   for   

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

註：本文愛編程原創文章，轉載請註明原文地址：http://www.w2bc.com/Article/11064

一款基於css3的動畫按鈕