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: &#39;&#39;;
  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!