Home > Article > Web Front-end > Use css pseudo-classes to achieve mouse-over button animation effects
The
button is a very common function for developers. The front end usually adds some operation interaction styles to buttons to increase some user experience.
For example: hover style, click style, loading style, etc. Let's learn about css3 animation and css pseudo-classes through simple examples.
Example 1
<button class="btn-1">按钮一</button> <style> button{ position: relative; width: 100px; height: 40px; border: 1px solid #46b0ff; background: none; cursor: pointer; } button:after{ position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; } .btn-1:after{ opacity: 0; background: #46b0ff; transition: all .3s; z-index: -1; } .btn-1:hover:after{ opacity: 1; } </style>
Analysis:
1. Use pseudo-class as mouse: after hover event, For the background of the button, relative positioning (relative) and absolute positioning (absolute) are used here
Remember: when using absolutely positioned elements, the parent element must use relative positioning, otherwise the element will keep looking upwards for the relatively positioned element. , until the root node.
2. Here, transition is used to describe the :hover event animation. The animation is completed in 0.3s and the transparency of :after is changed. all is all behavior.
Of course, we have a simpler implementation here. It is ok to directly change the background without using a type. Please see the code:
<button class="btn-1">按钮一</button> <style> button{ position: relative; width: 100px; height: 40px; border: 1px solid #46b0ff; background: none; cursor: pointer; background: rgba(70, 176, 255, 0); transition: all 1s; } .btn-1:hover{ background: rgba(70, 176, 255, 1); } </style>
ok. Based on Example 1, we will add Further, please see Example 2
Example 2
<button class="btn-2">按钮二</button> <style> ... /* 这里省略上方的公共样式 */ .btn-2:after{ width: 0; background: #f13f84; transition: all .3s; z-index: -1; } .btn-2:hover:after{ width: 100%; } </style>## Analysis: 1, here and Example 1 It's actually similar, but here we change the width of the pseudo class. 2. By analogy, we can change the height of the pseudo class and see the downward expansion animation.
<button class="btn-3">按钮三</button> <style> ... /* 这里省略上方的公共样式 */ .btn-2:after{ width: 0; background: #f13f84; transition: all .3s; z-index: -1; } .btn-2:hover:after{ width: 100%; } </style>For more programming-related knowledge, please visit:
Introduction to Programming! !
The above is the detailed content of Use css pseudo-classes to achieve mouse-over button animation effects. For more information, please follow other related articles on the PHP Chinese website!