Pure CSS3 to achieve mouse over button animation Part 2

After the previous two chapters, do you have a new understanding of button floating animation?

The previous two chapters mainly focused on the background, while this chapter focuses on the border animation effects. And this chapter (Button Group: Interesting CSS Button Animation, Taking You into the CSS World) ends here. The first three sections will be summarized at the end of this chapter.

Let's continue with the topic of this section. Please take a look at the effect example first:

Friends who have read the first two sections may not need to look at the source code below to know how to implement it. You can try it yourself first and then come back to take a look. Maybe the implementation methods are different, but as long as they can be implemented, they are all good methods.

The following example explains

Example 1

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

<style>
button{
  position: relative;
  width: 100px;
  height: 40px;
  background: none;
  cursor: pointer;
  color: #fff;
  border: none;
  margin-right: 20px;
  margin-bottom: 20px;
}
button:before, 
button:after{
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  z-index: 10;
  transition: all .5s;
}
/* Button 1 */
.btn-1:before, .btn-1:after{
  height: 2px;
  left: 50%;
  width: 0;
  background: #f13f84;
  transform: translateX(-50%);
}
.btn-1:before{
  top: 0;
}
.btn-1:after{
  bottom: 0;
}
.btn-1:hover:before, 
.btn-1:hover:after{
  width: 100%;
}
</style> 

Analysis:

1. :before top is 0, :after bottom is 0, height height: 2px , width is 0, and horizontally centered

2. Under the effect of absolute positioning, :hover changes the width of :before and :after to achieve the effect shown above.

Example 2

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

<style>
...
/* The common styles above are omitted here*/
.btn-2{
  background: #333;
  height: 36px;
}
.btn-2:before, 
.btn-2:after{
  width: 10px;
  height: 10px;
  background: #f13f84;
  mix-blend-mode: hue;
}
.btn-2:before {
  left: -2px;
  top: -2px;
}
.btn-2:after {
  right: -2px;
  bottom: -2px;
}
.btn-2:hover:before, 
.btn-2:hover:after{
  height: calc(100% + 4px);
  width: calc(100% + 4px);
}
</style> 

Analysis:

1. :before and :after , 2px beyond the button

2. Change the width and height :before and :after when :hover . Here, calc() is used for the width and height.

The calc() function is used to dynamically calculate the length value.

● It should be noted that a space is required before and after the operator, for example: width: calc(100% - 10px) ;

● Any length value can be calculated using the calc() function;

● calc() function supports "+", "-", "*", "/" operations;

● calc() function uses standard mathematical operation priority rules;

3. You may have noticed that in the above picture, a property mix-blend-mode is specially manipulated. Its function here is to make the button background appear over :before and :after background colors.

CSS3 mix-blend-mode syntax

mix-blend-mode:normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

hue mode The "hue" mode only uses the hue value of the "mixed color" for coloring, while keeping the saturation and brightness values ​​unchanged.

I won’t go into detail about mix-blend-mode here, but I hope to devote a chapter to it later.

Example 3

<button class="btn-3">
  <span>Button Three</span>
</button>

<style>
...
/* The common styles above are omitted here*/
button span:before, 
button span:after{
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  z-index: 10;
  transition: all .5s;
}
.btn-3{
  background: #333;
  height: 36px;
}
.btn-3:before, 
.btn-3:after, 
.btn-3 span:before, 
.btn-3 span:after{
  width: 10px;
  height: 10px;
  background: #f13f84;
  mix-blend-mode: hue;
}
.btn-3:before {
  left: -2px;
  top: -2px;
}
.btn-3:after {
  right: -2px;
  top: -2px;
}
.btn-3 span:before {
  left: -2px;
  bottom: -2px;
}
.btn-3 span:after {
  right: -2px;
  bottom: -2px;
}
.btn-3:hover:before, 
.btn-3:hover:after,
.btn-3:hover span:before,
.btn-3:hover span:after {
  height: 60%;
  width: 60%;
} 

Analysis:

1. Example 3 is an upgraded version of Example 2, using the span pseudo-class to improve the four corners of the button

2. When :hover just change the width and height of the four pseudo-classes.

Example 4

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

<style>
...
/* The common styles above are omitted here*/
.btn-4{
  height: 34px;
  border: 1px solid #f13f84;
}
.btn-4:before, 
.btn-4:after{
  width: 10px;
  height: 10px;
  border-style: solid;
  border-color: #f13f84;
}
.btn-4:before {
  left: -4px;
  top: -4px;
  border-width: 1px 0 0 1px;
}
.btn-4:after {
  right: -4px;
  bottom: -4px;
  border-width: 0 1px 1px 0;
}
.btn-4:hover:before, 
.btn-4:hover:after{
  height: calc(100% + 7px);
  width: calc(100% + 7px);
} 

Analysis:

1. Example 4 is another implementation of Example 2, but the difference is that the button has a border added

2. :before and :after to set border directly instead of using background to display the diagonal style.

width: 10px;
height: 10px;
border-style: solid;
border-color: #f13f84;
border-width: 1px 0 0 1px;

3. Then :hover .

Example 5

<button class="btn-5">Button Five</button>

<style>
...
/* The common styles above are omitted here*/
.btn-5{
  background: #333;
  height: 34px;
  border: 1px solid #fff;
}
.btn-5:before, 
.btn-5:after{
  width: 10px;
  height: 10px;
  border-style: solid;
  border-color: #fff;
}
.btn-5:before {
  left: -4px;
  top: -4px;
  border-width: 1px 0 0 1px;
}
.btn-5:after {
  right: -4px;
  bottom: -4px;
  border-width: 0 1px 1px 0;
}
.btn-5:hover{
  border-color: #f13f84;
}
.btn-5:hover:before, 
.btn-5:hover:after{
  height: calc(100% + 7px);
  width: calc(100% + 7px);
  border-color: #f13f84;
  transform: rotateY(180deg);
} 

Analysis:

1. Example 5 has only two differences from Example 4. When :hover , the pseudo class rotates 180° and changes the border color.

border-color: #f13f84;
transform: rotateY(180deg);

Example 6

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

<style>
...
/* The common styles above are omitted here*/
.btn-6{
  overflow: hidden;
}
.btn-6:before, 
.btn-6:after, 
.btn-6 span:before, 
.btn-6 span:after{
  background: linear-gradient(to right, rgba(0,0,0,0), #f13f84);
  transition: all 2s;
}
.btn-6:before, 
.btn-6:after{
  width: 100%;
  height: 1px;
}
.btn-6:before {
  top: 0;
  left: -100%;
}
.btn-6:after {
  bottom: 0;
  right: -100%;
}
.btn-6 span:before, .btn-6 span:after{
  width: 1px;
  height: 100%;
}
.btn-6 span:before {
  bottom: -100%;
  left: 0;
}
.btn-6 span:after {
  top: -100%;
  right: 0;
}
.btn-6:hover:before{
  animation: topA 1s linear infinite;
  animation-delay: .5s;
}
@keyframes topA{
  100%{
    left: 100%;
  }
}
.btn-6:hover span:after{
  animation: rightA 1s linear infinite;
  animation-delay: 1s;
}
@keyframes rightA{
  100%{
    top: 100%;
  }
}
.btn-6:hover:after{
  animation: bottomA 1s linear infinite;
  animation-delay: 1.5s;
}
@keyframes bottomA{
  100%{
    right: 100%;
  }
}
.btn-6:hover span:before {
  animation: leftA 1s linear infinite;
  animation-delay: 2s;
}
@keyframes leftA{
  100%{
    bottom: 100%;
  }
} 

Analysis:

1. Example 6 is a little bit similar to Example 3, but it is an upgraded version.

2. Also through four pseudo-classes, distributed in the upper, right, lower and left positions of the button, the upper and lower pseudo-class height is 1px, the width is 100%, the left and right pseudo-class width is 1px, the height is 100%, and the background is set to linear gradient linear-gradient

3. When :hover , the upper pseudo-class moves from the left -100% position to the left 100% position; the right pseudo-class moves from the top -100% position to the top 100% position; the lower pseudo-class moves from the right -100% position to the right 100% position; the left pseudo-class moves from the bottom -100% position to the bottom 100% position. Then set the delay to execute the animation.

It is important to note that the animation-delay time must be adjusted properly, otherwise it will not look smooth and there will be problems with the connection.

Example 7

<button class="btn-7">
  <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
    <rect class="outline" height="100%" width="100%" />
    <div class="text">Button Seven</div>
  </svg>
</button>

<style>
...
/* The common styles above are omitted here*/
.btn-7{
  position: relative;
  color: #f13f84;
  text-decoration: none;
  width: 250px;
  height: 50px;
  margin: 50px auto;
  overflow: hidden;
}
.btn-7 .outline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  stroke: #f13f84;
  stroke-width: 2px;
  fill: transparent;
  stroke-dasharray: 100 500;
  stroke-dashoffset: 225;
  transition: all .5s;
  box-sizing: border-box;
}
.btn-7 .text {
  position: relative;
  top: -35px;
  line-height: 1;
  letter-spacing: 1px;
  text-transform:uppercase;
}
.btn-7:hover .outline{
  stroke-dasharray: 600 0;
  stroke-dashoffset: 475;
} 

Analysis:

1. Example 7 is a way to select all, svg

2. svg element description

The <text> element is used to define text

<rect> defines a rectangular shape (circle <circle> , ellipse <ellipse> , line <line> , polyline <polyline> , polygon <polygon> , path <path> )

3. svg attribute description

stroke defines the color of a line, text or element outline

stroke-width property defines the thickness of a line, text, or element outline.

stroke-dasharray attribute is used to set the pattern of the dotted lines of the stroke. It is to set the width of solid and dashed lines. That is, with or without the length of the line segment.

stroke-dashoffset specifies the distance from the dash pattern to the beginning of the path

For details, a special chapter will be provided later.

Summarize

This chapter (Button Group: Interesting CSS Button Animation, Taking You into the CSS World) ends here. First of all, thank you for your support.

What have you learned from this chapter?

1. Idea, each section, examples are from easy to difficult, step by step;

2. Use of CSS pseudo-elements :before and :after

3. Layout of HTML elements, horizontal and vertical centering of elements

4. What is the difference between transition and animation ? (If you want to know the answer, you can read the editor’s historical articles)?

5. CSS3 linear gradient and radial gradient

6. Flexible use of relative positioning and absolute positioning

7. transform element movement, deformation, rotation, etc.