為大家分享了很多款純css3實現的實用按鈕。今天給大家?guī)硪豢罨赾ss3的動畫按鈕。實現的效果圖如下：

實現的代碼。

html代碼：

XML/HTML Code復制內容到剪貼板

<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代碼：

CSS Code復制內容到剪貼板

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;

}

更多信息請查看IT技術專欄