css3 to create mouse over button effects

Y2J
Release: 2017-05-24 10:41:37
Original
1803 people have browsed it

This article mainly introduces a mouse made using css3 withbuttonspecial 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/HTMLCodeCopy Content to clipboard

WIFEO

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: '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;} }
Copy after login

[Related recommendations]

1.

CSS3 Free Video Tutorial

2.

About CSS3 Detailed explanation of examples of selectors

3.

Detailed explanation of examples of the content attribute in CSS3

4.

Detailed explanation of the 10 top-level commands in CSS3

5.

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!

source:php.cn
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
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!