CSS pseudo class: CSS3 mouse over button animation section 2

Preface

With the experience of the first section, we can upgrade the direct animation effect. If we combine: before,: after, the effect will be cooler.

Please take a look at the effect example:

Here is an example

Example 1

<button class="btn-1">Button 1</button>

<style>
button{
  position: relative;
  width: 100px;
  height: 40px;
  border: 1px solid #46b0ff;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
button:before, 
button:after{
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: all .5s;
}
/* Button 1 */
.btn-1:before{
  top: 0;
  height: 0;
  left: 0;
}
.btn-1:after{
  bottom: 0;
  height: 0;
  left: 0;
  background: rgba(70, 176, 255, 1);
}
.btn-1:hover:before, .btn-1:hover:after{
  height: 50%;
  background: rgba(70, 176, 255, 1);
}
</style>

Analysis:

1. : before top is 0,: after bottom is 0

2. Under the function of absolute positioning, when: hover changes the height of: before,: after,: before will extend downward, and: after will extend upward.

3. At the same time, we only give: before,: after background color when: hover, so there is a background color transition effect.

Here we can also change it into a left-right merger style, which can be studied by our partners.

Example two

<button class="btn-2">Button two</button>

<style>
...
/* The public style above is omitted here */
.btn-2:before, .btn-2:after{
  width: 0;
  height: 0;
  border-width: 0 0 0 0;
  border-style: solid;
  bottom: 0;
}
.btn-2:before{
  border-color: transparent transparent transparent #f13f84;
  left: 0;
}
.btn-2:after{
  border-color: transparent transparent #f13f84 transparent;
  right: 0;
}
.btn-2:hover:before {
  border-width: 100px 0 0 100px;
}
.btn-2:hover:after {
  border-width: 0 0 100px 100px;
}
</style>

Analysis:

1. The border of: before,: after draws two triangles, and their bottom is 0, while: before's left=0, and: After's right=0

See the following example:

.triangle{
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent transparent #f13f84;
  border-width: 100px 0 0 100px;
}

2. Then change the border width to form an upward merging effect

Example three

<button class="btn-3">Button three</button>

<style>
...
/* The public style above is omitted here */
.btn-3:before, .btn-3:after{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 0 0;
}
.btn-3:before{
  border-color: transparent transparent transparent #00b7a3;
  bottom: 0;
  left: 0;
}
.btn-3:after{
  border-color: transparent #00b7a3 transparent transparent;
  top: 0;
  right: 0;
}
.btn-3:hover:before, .btn-3:hover:after {
  border-width: 80px 210px;
}

Analysis:

1. With the experience of example 2, we can make some modifications here. Just change top, bottom, left, right

Example four

<button class="btn-4">Button four</button>

<style>
...
/* The public style above is omitted here */
.btn-4:before, .btn-4:after{
  top: 50%;
  width: 20px;
  height: 20px;
  background: #8865ae;
  border-radius: 50%;
}
.btn-4:before{
  left: -20px;
  transform: translate(-50%, -50%);
}
.btn-4:after{
  right: -20px;
  transform: translate(50%, -50%);
}
.btn-4:hover:before{
  animation: criss-cross-left 0.8s both;
}
.btn-4:hover:after{
  animation: criss-cross-right 0.8s both;
}
@keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 150px;
    height: 150px;
  }
}
@keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 150px;
    height: 150px;
  }
}

Analysis:

1. : before,: after draw 2 circles, and vertically center them. The beginning is not in the visible range,: before left,: after right

top: 50%;
transform: translateY(-50%);

2. : hover, 50% before the first half of the animation, change the size of: before,: after left and right to move them to the middle

3. After 50% of the second half of the animation, left and right are kept, and the size of the circle is changed at the same time, you can see the effect of two small balls expanding after collision

Example five

<button class="btn-5">
  <span>Button five</span>
</button>

<style>
...
/* The public style above is omitted here */
button span:before, 
button span:after{
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: all .5s;
}
.btn-5:before, .btn-5:after, .btn-5 span:before, .btn-5 span:after{
  top: 0;
  width: 25px;
  height: 0;
  background: #1199ff;
}
.btn-5:before {
  left: 0;
}
.btn-5:after {
  right: 0;
  bottom: 0;
  top: initial;
}

.btn-5 span:before {
  left: 25px;
  bottom: 0;
  top: initial;
}
.btn-5 span:after {
  left: 50px;
  top: 0;
  bottom: initial;
}
.btn-5:hover:before, 
.btn-5:hover:after,
.btn-5:hover span:before,
.btn-5:hover span:after {
  height: 100%;
}

Analysis:

1. According to example 1, we expand it. We add span element, and add 2 pseudo classes, horizontal layout

2. Stagger up and down positions: hover, change height to form animation effect

Example six

<button class="btn-6">
  <span>Button six</span>
</button>

<style>
...
/* The public style above is omitted here */
.btn-6:before, 
.btn-6:after, 
.btn-6 span:before, 
.btn-6 span:after{
  width: 0;
  height: 0;
  background: #f13f84;
}
.btn-6:before {
  left: 0;
  top: 0;
}
.btn-6:after {
  right: 0;
  top: 0;
}

.btn-6 span:before {
  left: 0;
  bottom: 0;
}
.btn-6 span:after {
  right: 0;
  bottom: 0;
}
.btn-6:hover:before, 
.btn-6:hover:after,
.btn-6:hover span:before,
.btn-6:hover span:after {
  height: 50%;
  width: 50%;
}

Analysis:

1. According to example 5, we rearrange the four pseudo classes, and their starting positions are located at the four corners of the button

2. : when hover, change the width and height to 50% to form an animation

Example seven

<button class="btn-7">
  <span>Button seven</span>
</button>

<style>
...
/* The public style above is omitted here */
.btn-7:before, 
.btn-7:after{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 0 0;
}

.btn-7:before{
  border-color: transparent transparent transparent #3da83d;
  bottom: 0;
  left: 0;
}
.btn-7:after{
  border-color: transparent #3da83d transparent transparent;
  top: 0;
  right: 0;
}

.btn-7 span:before, .btn-7 span:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 0 0;
}

.btn-7 span:before {
  border-color: transparent transparent #3da83d transparent;
  right: 0;
  bottom: 0;
}

.btn-7 span:after {
  border-color: #3da83d transparent transparent transparent;
  top: 0;
  left: 0;
}

.btn-7:hover:before {
  border-width: 100px 0 0 100px;
}
.btn-7:hover:after {
  border-width: 0 100px 100px 0;
}
.btn-7:hover span:before {
  border-width: 0 0 100px 100px;
}
.btn-7:hover span:after {
  border-width: 100px 100px 0 0;
}

Analysis:

1. According to examples 2 and 5, the four pseudo classes are all triangles and are located at the four corners of the button

2. : hover, change border width to create animation effect

summary

What did you learn through this section?

1. Using pseudo elements to deepen rolling

2. Element triangle drawing

3. : hover mouse move in animation roll in

Guys, if you have any questions, please leave a message in the comment area. Welcome to comment.

Original address: http://www.javanx.cn/20191225/buttonhover-2/

Tags: Front-end

Posted on Mon, 13 Jan 2020 06:03:41 -0500 by piet123