内容发布更新时间 : 2024/11/16 3:32:43星期一 下面是文章的全部内容请认真阅读。

为大家分享了很多款纯css3实现的实用按钮。今天给大家带来一款基于css3的动画按钮。实现的效果图如下： 实现的代码。 html代码：

XML/HTML Code复制内容到剪贴板 <div class=\ <div class=\

<div class=\

<div class=\ share on twitter </div> </div>

<div class=\

<i class=\ </div> </div>

<div class=\

<div class=\

<div class=\ share on facebook </div> </div>

<div class=\

<i class=\ </div> </div>

<div class=\

<div class=\

<div class=\ pin on pinterest </div> </div>

<div class=\

<i class=\ </div> </div>

<div class=\

<div class=\

<div class=\ share on tumblr </div> </div>

<div class=\

<i class=\ </div> </div>

<div class=\

<div class=\

<div class=\ share on google+ </div> </div>

<div class=\

<i class=\ </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; }