511 views
1.container .btn { 2 position: relative; 3 top: 0; 4 left: 0; 5 width: 160px; 6 height: 50px; 7 margin: 0; 8 display: flex; 9 justify-content: center; 10 align-items: center; 11} 12 13.container .btn a { 14 position: absolute; 15 top: 0; 16 left: 0; 17 width: 100%; 18 height: 100%; 19 display: flex; 20 justify-content: center; 21 align-items: center; 22 background: rgba(255, 255, 255, 0.05); 23 box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3); 24 border-bottom: 1px solid rgba(255, 255, 255, 0.1); 25 border-top: 1px solid rgba(255, 255, 255, 0.1); 26 border-radius: 30px; 27 padding: 10px; 28 letter-spacing: 1px; 29 text-decoration: none; 30 overflow: hidden; 31 color: #000; 32 font-weight: 400px; 33 z-index: 1; 34 transition: 0.5s; 35 backdrop-filter: blur(15px); 36} 37 38.container .btn:hover a { 39 letter-spacing: 3px; 40} 41 42.container .btn a::before { 43 content: ""; 44 position: absolute; 45 top: 0; 46 left: 0; 47 width: 50%; 48 height: 100%; 49 background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent); 50 transform: skewX(45deg) translate(0); 51 transition: 0.5s; 52 filter: blur(0px); 53} 54 55.container .btn:hover a::before { 56 transform: skewX(45deg) translate(200px); 57} 58 59.container .btn::before { 60 content: ""; 61 position: absolute; 62 left: 50%; 63 transform: translatex(-50%); 64 bottom: -5px; 65 width: 30px; 66 height: 10px; 67 background: #f00; 68 border-radius: 10px; 69 transition: 0.5s; 70 transition-delay: 0.5; 71} 72 73.container .btn:hover::before /*lightup button*/ { 74 bottom: 0; 75 height: 50%; 76 width: 80%; 77 border-radius: 30px; 78} 79 80.container .btn::after { 81 content: ""; 82 position: absolute; 83 left: 50%; 84 transform: translatex(-50%); 85 top: -5px; 86 width: 30px; 87 height: 10px; 88 background: #f00; 89 border-radius: 10px; 90 transition: 0.5s; 91 transition-delay: 0.5; 92} 93 94.container .btn:hover::after /*lightup button*/ { 95 top: 0; 96 height: 50%; 97 width: 80%; 98 border-radius: 30px; 99} 100 101.container .btn:nth-child(1)::before, /*chnage 1*/ 102.container .btn:nth-child(1)::after { 103 background: #ff1f71; 104 box-shadow: 0 0 5px #ff1f71, 0 0 15px #ff1f71, 0 0 30px #ff1f71, 105 0 0 60px #ff1f71; 106}
MIT License