A special button effect that is implemented by the mouse in pure css3, and implemented by css3

A special button effect that is implemented by the mouse in pure css3, and implemented by css3

Today, we will bring you a special effect on mouse passing through buttons implemented by pure css3. This button is very simple, but the effect is very good, very beautiful. Let's take a look:

Download Online Preview source code

Implementation code.

Html code:

 <div align="center">        <div class="contener">            <div class="txt_button">                WIFEO</div>            <div class="circle">                &nbsp;</div>        </div>    </div>

Css3 code:

  .contener{  width: 300px;  height: 60px;  background-color: #00bcd4;  line-height: 60px;  color: #ffffff;  font-weight: 300;  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:1;-webkit-transform:scale(0);}  100% {opacity:0;-webkit-transform:scale(5);background-color: #006064;}   }@-moz-keyframes oblik {  0% {opacity:1;-moz-transform:scale(0);}  100% {opacity:0;-moz-transform:scale(5);background-color: #006064;}   }@-ms-keyframes oblik {  0% {opacity:1;-ms-transform:scale(0);}  100% {opacity:0;-ms-transform:scale(5);background-color: #006064;}   }@keyframes oblik {  0% {opacity:1;transform:scale(0);}  100% {opacity:0;transform:scale(5);background-color: #006064;}   }

Note: This article love programming Original article, reprint please indicate the original address: http://www.w2bc.com/Article/9086

What do you know about soft ship training?

HTML5/CSS3 is the button special effects that can be used to write web pages. It is very practical. If you don't quite understand it, You can first understand the relationship between htmlhe and css. This is the programming knowledge.

Q: How does the image rotate around the center of the circle when the mouse slides over the background image? Css3 is also supported.

@-Webkit-keyframes btnRotate {0% {-webkit-transform: rotateZ (0deg);} 100% {-webkit-transform: rotateZ (360deg); }}# startMenu button: hover img {-webkit-animation: btnRotate 1.5 s linear infinite;} I tried the code above. It seems that I can only circle it.
The animation effect of css3 I used. When you move the mouse up, it will keep turning. Move the mouse away and restore it.