最近在做博客的时候，在文章内容页要用到分享的功能，顺便给按钮加了一下效果（hover的时候有一个高亮扩展的效果）。

这里主要是用到了css3的两个属性来transition和transform属性，然后用过伪类:hover和伪元素:before(其实在css3中为了区分它和伪类的区别，建设写为::before)来实现。。

具体请看如下代码：

html： 

<div class="ui-share">
     <a class="weixin" href="javascript:;"></a>
     <a class="weibo" href="javascript:;"></a>
     <a class="qqzone" href="javascript:;"></a>
</div>
css: 
.ui-share{ width: 380px;height:60px;  color: #999}
.ui-share a{ width: 60px; height: 60px; float:left; display: inline; margin:0 0 0 15px; border-radius: 50%; position: relative;}
.ui-share a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    opacity: 0;
    -webkit-transition: .5s cubic-bezier(.3,0,0,1.2);
    -moz-transition: .5s cubic-bezier(.3,0,0,1.2);
    transition: .5s cubic-bezier(.3,0,0,1.2);
    -webkit-transform: scale(0,0);
    -moz-transform: scale(0,0);
    transform: scale(0,0);
}
.ui-share a:hover:before {
    opacity:1;
    -webkit-transform:scale(1,1);
    -moz-transform:scale(1,1);
    transform:scale(1,1)
}
.ui-share .weixin{ background: #1ec354 }
.ui-share .weibo{background: #DA0729}
.ui-share .qqzone{background: #E2B80D}
.ui-share .weixin:hover:before{ background: #36E06D }
.ui-share .weibo:hover:before{background: #F16A7F}
.ui-share .qqzone:hover:before{background: #FFD735}

 效果如下图：(鼠标hover上去可以显示)