preface
After the previous two chapters, do you have a new understanding of button hover animation?
While the first two chapters focus on backgrounds, this chapter focuses on border animations. And that’s the end of this chapter (Button Groups: Interesting CSS button animations that take you into the CSS world), which concludes with a summary of the first three sections.
To continue the topic of this section, take a look at an example effect:
Read the first two sections of friends, may not need to see the source code below, you know how to achieve it, you can first try yourself, and then come back to see. It may be implemented in a different way, but as long as it can be implemented, it’s a good way.
Here are some examples
The sample a
<button class="btn-1">Button a</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 one */
.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>
Copy the code
Resolution:
1, :before top 0, :after bottom 0, height: 2px, width: 0, horizontal center
2. Under the action of absolute positioning, :hover changes the width of :before and :after to form the effect above
Example 2
<button class="btn-2">Button 2</button>
<style>./* omit the top public style */
.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>
Copy the code
Resolution:
1, :before, :after, beyond button 2px
2, :hover: change :before, :after
The calc() function is used to dynamically calculate the length value.
● Leave a space 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 () functions use standard mathematical operation priority rules;
3. As you may have noticed in the image above, the mix-blending-mode attribute is used to make the button’s background appear above the :before and :after colors.
CSS 3 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 In Hue mode, only the hue value of the Blend color is used, leaving the saturation and brightness values unchanged.
Mix-blending-mode will not be discussed here, but hopefully a chapter will be devoted to it later.
Example 3
<button class="btn-3">
<span>Button three</span>
</button>
<style>./* omit the top public style */
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%;
}
Copy the code
Resolution:
Example 3 is an updated version of Example 2, using a span pseudo-class to complete the four corners of the button
2, :hover to change the width and height of the four pseudo-classes.
Example 4
<button class="btn-4">Button four</button>
<style>./* omit the top public style */
.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);
}
Copy the code
Resolution:
Example 4 is another implementation of Example 2, but the difference is that the button has a border
2, :before, :after Set the border directly instead of using background to show the diagonal style.
width: 10px;
height: 10px;
border-style: solid;
border-color: #f13f84;
border-width: 1.px 0 0 1px;
Copy the code3, then :hover to change the width and height of the pseudo-class, you can
The sample of five
<button class="btn-5">Button five</button>
<style>./* omit the top public style */
.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);
}
Copy the code
Resolution:
1. Example 5, only 2 points different from example 4 :hover, rotate its pseudo-class 180°, and change the border color at the same time
border-color: #f13f84;
transform: rotateY(180deg);
Copy the codeThe sample of 6
<button class="btn-6">
<span>Button six</span>
</button>
<style>./* omit the top public style */
.btn-6{
overflow: hidden;
}
.btn-6:before..btn-6:after..btn-6 span:before..btn-6 span:after{
background: linear-gradient(to the 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.5 s;
}
@keyframes bottomA{
100%{
right: 100%; }}.btn-6:hover span:before {
animation: leftA 1s linear infinite;
animation-delay: 2s;
}
@keyframes leftA{
100%{
bottom: 100%; }}Copy the code
Resolution:
1. Example 6, which bears a slight resemblance to Example 3, is an updated version
2. Four pseudo-classes were distributed on the upper, right, lower and left positions of the button respectively. The height and width of the upper and lower pseudo-classes were 1px and 100%, and the width and height of the left and right pseudo-classes were 1px and 100%
3, :hover, the upper pseudo class from the left -100% position, to the left 100% position movement; The pseudoclass on the right moves from the top -100% position to the top 100% position; The delivery pseudo class moves from the right-100% position to the right 100% position; The pseudoclass on the left moves from the bottom -100% position to the bottom 100% position. Then set the delay animation, can be.
It should be noted that the animation-delay time must be properly adjusted, otherwise it will not look smooth and there will be problems in 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>./* omit the top public style */
.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;
}
Copy the code
Resolution:
1. Example 7, which is an all-in-one approach, SVG
2. SVG element description
-
The
element is used to define text
-
defines rectangular shapes (circle
, ellipse
, line, polyline , polygon , path )
3. SVG attribute description
-
A stroke defines a line, text, or element outline color
-
The stroke-width property defines the thickness of a line, text, or element contour
-
The stroke-dasharray property is used to set the dotted pattern pattern for stroke. Is to set the width of the solid and dashed lines. The length of the line segment with or without it.
-
Stroke-dashoffset specifies the distance from the dash mode to the start of the path
Specific, the following also provides a special chapter about
conclusion
This chapter (Button Groups: Interesting CSS button animations that take you into the CSS world) concludes, thanks for your support.
What have you learned from this chapter?
1. Ideas: Each section and example are from easy to difficult, step by step;
2, CSS pseudo-class elements :before, :after use
3. Layout of HTML elements with horizontal and vertical centers
4. What’s the difference between transition and animation?
5. CSS3 linear gradient and radial gradient
6, relative positioning and absolute positioning flexible use
Transform elements move, deform, rotate, etc
There are so many points of knowledge. Have you learned them all?
If you have any questions, please leave them in the comments section.
The original address: www.javanx.cn/20191226/bu…
