标签：https near direct otto amp oct enter box link
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>button霓虹灯</title> 8 <link href="index.css" rel="stylesheet"> 9 </head> 10 11 <body> 12 <a href="">Button</a> 13 <a href="">Button</a> 14 <a href="">Button</a> 15 </body> 16 17 </html>
1 body{ 2 display: flex; 3 flex-direction: column; 4 justify-content: center; 5 align-items: center; 6 background-color: #000000; 7 min-height: 100vh; 8 } 9 a{ 10 position: relative; 11 padding: 10px 30px; 12 margin: 45px 0; 13 color: #21ebff; 14 text-decoration: none; 15 font-size: 20px; 16 text-transform: uppercase; 17 transition: 0.5s; 18 overflow: hidden; 19 -webkit-box-reflect: below 1px linear-gradient(transition,#0003); 20 } 21 a:hover{ 22 background-color: #21ebff; 23 color: #111; 24 box-shadow: 0 0 50px #21ebff; 25 transition-delay: 0.5s; 26 } 27 28 a:nth-child(1){ 29 filter: hue-rotate(115deg); 30 } 31 a:nth-child(3){ 32 filter: hue-rotate(270deg); 33 } 34 35 a::before{ 36 content: ""; 37 position: absolute; 38 top: 0; 39 left: 0; 40 width: 10px; 41 height: 10px; 42 border-top: 2px solid #21ebff; 43 border-left: 2px solid #21ebff; 44 transition: 0.5s; 45 transition-delay: 0.5s; 46 } 47 a:hover::before{ 48 width: 100%; 49 height: 100%; 50 transition-delay: 0s; 51 } 52 a::after{ 53 content: ""; 54 position: absolute; 55 right: 0; 56 bottom: 0; 57 width: 10px; 58 height: 10px; 59 border-bottom: 2px solid #21ebff; 60 border-right: 2px solid #21ebff; 61 transition: 0.5s; 62 transition-delay: 0.5s; 63 } 64 65 a:hover::after{ 66 width: 100%; 67 height: 100%; 68 transition-delay: 0s; 69 }body{ 70 display: flex; 71 flex-direction: column; 72 justify-content: center; 73 align-items: center; 74 background-color: #000000; 75 min-height: 100vh; 76 } 77 a{ 78 position: relative; 79 padding: 10px 30px; 80 margin: 45px 0; 81 color: #21ebff; 82 text-decoration: none; 83 font-size: 20px; 84 text-transform: uppercase; 85 transition: 0.5s; 86 overflow: hidden; 87 -webkit-box-reflect: below 1px linear-gradient(transition,#0003); 88 } 89 a:hover{ 90 background-color: #21ebff; 91 color: #111; 92 box-shadow: 0 0 50px #21ebff; 93 transition-delay: 0.5s; 94 } 95 96 a:nth-child(1){ 97 filter: hue-rotate(115deg); 98 } 99 a:nth-child(3){ 100 filter: hue-rotate(270deg); 101 } 102 103 a::before{ 104 content: ""; 105 position: absolute; 106 top: 0; 107 left: 0; 108 width: 10px; 109 height: 10px; 110 border-top: 2px solid #21ebff; 111 border-left: 2px solid #21ebff; 112 transition: 0.5s; 113 transition-delay: 0.5s; 114 } 115 a:hover::before{ 116 width: 100%; 117 height: 100%; 118 transition-delay: 0s; 119 } 120 a::after{ 121 content: ""; 122 position: absolute; 123 right: 0; 124 bottom: 0; 125 width: 10px; 126 height: 10px; 127 border-bottom: 2px solid #21ebff; 128 border-right: 2px solid #21ebff; 129 transition: 0.5s; 130 transition-delay: 0.5s; 131 } 132 133 a:hover::after{ 134 width: 100%; 135 height: 100%; 136 transition-delay: 0s; 137 }
标签：https near direct otto amp oct enter box link
原文地址：https://www.cnblogs.com/wenrouduidai/p/13237307.html
