Button by TaniaDou
#212121
1.button { 2 padding: 1rem 2rem; 3 border-radius: 0.5rem; 4 border: none; 5 font-size: 1rem; 6 font-weight: 400; 7 color: #f4f0ff; 8 text-align: center; 9 position: relative; 10 cursor: pointer; 11} 12 13.button::before { 14 content: ""; 15 display: block; 16 position: absolute; 17 left: 0; 18 top: 0; 19 height: 100%; 20 width: 100%; 21 border-radius: 0.5rem; 22 background: linear-gradient( 23 180deg, 24 rgba(8, 77, 126, 0) 0%, 25 rgba(8, 77, 126, 0.42) 100% 26 ), 27 rgba(47, 255, 255, 0.24); 28 box-shadow: inset 0 0 12px rgba(151, 200, 255, 0.44); 29 z-index: -1; 30} 31 32.button::after { 33 content: ""; 34 display: block; 35 position: absolute; 36 top: 0; 37 left: 0; 38 width: 100%; 39 height: 100%; 40 background: linear-gradient( 41 180deg, 42 rgba(8, 77, 126, 0) 0%, 43 rgba(8, 77, 126, 0.42) 100% 44 ), 45 rgba(47, 255, 255, 0.24); 46 box-shadow: inset 0 0 12px rgba(151, 200, 255, 0.44); 47 border-radius: 0.5rem; 48 opacity: 0; 49 z-index: -1; 50 transition: all 0.3s ease-in; 51} 52 53.button:hover::after { 54 opacity: 1; 55} 56 57.button-border { 58 position: absolute; 59 top: 0; 60 left: 0; 61 height: 100%; 62 width: 100%; 63 border-radius: 0.5rem; 64 z-index: -1; 65} 66 67.button-border::before { 68 content: ""; 69 position: absolute; 70 border-radius: 0.5rem; 71 padding: 1px; 72 inset: 0; 73 background: linear-gradient( 74 180deg, 75 rgba(184, 238, 255, 0.24) 0%, 76 rgba(184, 238, 255, 0) 100% 77 ), 78 linear-gradient(0deg, rgba(184, 238, 255, 0.32), rgba(184, 238, 255, 0.32)); 79 -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); 80 -webkit-mask-composite: xor; 81 pointer-events: none; 82} 83
4.4K views
4.4K views
MIT License