一款纯css3实现的鼠标经过按钮特效

今天再给大家带来一款纯css3实现的鼠标经过按钮特效。这款按钮非常简单，但效果很好，非常漂亮。一起看下效果图：

在线预览   源码下载

实现的代码。

html代码：

 <div align="center">

        <div class="contener">

            <div class="txt_button">

                WIFEO</div>

            <div class="circle">

                &nbsp;</div>

        </div>

    </div>

css3代码：

  .contener

{

  width: 300px;

  height: 60px;

  background-color: #00bcd4;

  line-height: 60px;

  color: #ffffff;

  font-weight:;

  font-family: 'Roboto';

  font-size: 25px;

  position: relative;

  overflow: hidden;

  cursor: pointer;

  box-shadow:1px 1px 1px #333333;

}

.txt_button

{

  position: absolute;

  width: 100%;

}

.contener:hover .circle

{

  -webkit-animation:oblik 0.4s ease-in;

  -webkit-transform-origin: 50% 50%;

  -moz-animation:oblik 0.4s ease-in;

  -moz-transform-origin: 50% 50%;

  -ms-animation:oblik 0.4s ease-in;

  -ms-transform-origin: 50% 50%;

  animation:oblik 0.4s ease-in;

  transform-origin: 50% 50%;

  width: 100px;

  height: 100px;

  border-radius: 50%;

}

@-webkit-keyframes oblik {

  0% {opacity:;-webkit-transform:scale(0);}

  100% {opacity:;-webkit-transform:scale(5);background-color: #006064;}

}

@-moz-keyframes oblik {

  0% {opacity:;-moz-transform:scale(0);}

  100% {opacity:;-moz-transform:scale(5);background-color: #006064;}

}

@-ms-keyframes oblik {

  0% {opacity:;-ms-transform:scale(0);}

  100% {opacity:;-ms-transform:scale(5);background-color: #006064;}

}

@keyframes oblik {

  0% {opacity:;transform:scale(0);}

  100% {opacity:;transform:scale(5);background-color: #006064;}

}

注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/9086