web前端动画按钮（附源代码）

结果图

源代码

HTML部分

2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5.     <meta charset="UTF-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>Document</title>
8. </head>
9. <link rel="stylesheet" href="..\暑假学习网页小零件\按钮2.css">
10. <body>
11. <a href="">爱莉希雅</a>
12. <a href="">爱莉希雅</a>
13. <a href="">爱莉希雅</a>
14.    
15. </body>
16. </html>

复制代码

css部分

2. *{
3.     margin: 0;
4.     padding: 0;
5.     box-sizing: border-box;
6. }
7. body{
8.     display: flex;
9.     justify-content: center;
10.     align-items: center;
11.     gap: 100px;
12.     background-color: black;
13.     min-height: 100vh;
14. }
15. a{
16.     position: relative;
17.     padding: 10px 50px;
18.     margin: 45px 0;
19.     color:pink;
20.     text-decoration: none;
21.     font-size: 25px;
22.     font-family: 'Times New Roman', Times, serif;
23.     overflow: hidden;
24.     transition: all 0.4s;
25.     -webkit-box-reflect: below 1px linear-gradient(transparent,#0003);
26.    
27. }
28. a::before{
29.     position: absolute;
30.     content: "";
31.     top: 0;
32.     left: 0;
33.     border-left: 3px solid pink;
34.     border-top: 3px solid pink;
35.     width: 20px;
36.     height: 15px;
37.     transition: all 0.5s;
38. }
39. a::after{
40.     position: absolute;
41.     content: "";
42.     bottom: 0;
43.     right: 0;
44.     border-right: 3px solid pink;
45.     border-bottom: 3px solid pink;
46.     width: 20px;
47.     height: 15px;
48.     transition: all 0.5s;
49. }
50. a:hover::before,
51. a:hover::after{
52.     width: 100%;
53.     height: 100%;
54. }
55. a:hover{
56.     background-color: pink;
57.     color: black;
58.     box-shadow: 0 0 pink;
59.     transition-delay: 0.5s;
60. }
61. /* 选择父元素下特定的位置，可以是数字，odd（奇数），even（偶数）或者表达式。 */
62. a:nth-child(1){   
63.     /* 滤镜 */
64.     filter: hue-rotate(150deg);
65. }
66. a:nth-child(3)
67. {
68.     filter: hue-rotate(280deg);
69. }

复制代码