css3 to create mouse over button effects-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

css3 to create mouse over button effects

Y2J

May 24, 2017 am 10:41 AM

css3 css3 special effects html5 special effects

This article mainly introduces a mouse made using css3 with button special effects. When the mouse is placed on the button, the button will change and produce a dynamic The effect is very beautiful. Friends who need it can refer to

Today I will bring you a mouse passing button special effect implemented in pure CSS3. This button is very simple but works very well and is very beautiful. Let’s take a look at the renderings:

Implemented code.

　html code:

##XML/HTML CodeCopy Content to clipboard

<p align="center">
       <p class="contener">
           <p class="txt_button">
               WIFEO</p>
           <p class="circle">
                </p>
       </p>
   </p>

Copy after login

css3 code:

CSS CodeCopy Content to clipboard

.contener   
{   
  width: 300px;   
  height: 60px;   
  background-color: #00bcd4;   
  line-height: 60px;   
  color: #ffffff;   
  font-weight: 300;   
  font-family: &#39;Roboto&#39;;   
  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;}      
}

Copy after login

[Related recommendations]

CSS3 Free Video Tutorial

About CSS3 Detailed explanation of examples of selectors

Detailed explanation of examples of the content attribute in CSS3

Detailed explanation of the 10 top-level commands in CSS3

Briefly describe how web designers can use CSS3 technology well

The above is the detailed content of css3 to create mouse over button effects. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn