Button by TaniaDou
#212121
1.button { 2 padding: 1rem 2rem; 3 border-radius: .5rem; 4 border: none; 5 font-size: 1rem; 6 font-weight: 400; 7 color: #f4f0ff; 8 text-align: center; 9 backdrop-filter: blur(10px); 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: .5rem; 22 background: linear-gradient(180deg, rgba(8, 77, 126, 0) 0%, rgba(8, 77, 126, 0.42) 100%),rgba(47,255,255,.24); 23 box-shadow: inset 0 0 12px rgba(151,200,255,.44); 24 z-index: -1; 25} 26 27.button::after { 28 content: ""; 29 display: block; 30 position: absolute; 31 top: 0; 32 left: 0; 33 width: 100%; 34 height: 100%; 35 background: linear-gradient(180deg, rgba(8, 77, 126, 0) 0%, rgba(8, 77, 126, 0.42) 100%),rgba(47,255,255,.24); 36 box-shadow: inset 0 0 12px rgba(151,200,255,.44); 37 border-radius: .5rem; 38 opacity: 0; 39 z-index: -1; 40 transition: all .3s ease-in; 41} 42 43.button:hover::after { 44 opacity: 1; 45} 46 47.button-border { 48 position: absolute; 49 top: 0; 50 left: 0; 51 height: 100%; 52 width: 100%; 53 border-radius: .5rem; 54 z-index: -1; 55} 56 57.button-border::before { 58 content: ""; 59 position: absolute; 60 border-radius: .5rem; 61 padding: 1px; 62 inset: 0; 63 background: linear-gradient(180deg, rgba(184, 238, 255, 0.24) 0%, rgba(184, 238, 255, 0) 100%),linear-gradient(0deg, rgba(184, 238, 255, 0.32), rgba(184, 238, 255, 0.32)); 64 -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); 65 -webkit-mask-composite: xor; 66 pointer-events: none; 67}
3.2K views
3.2K views
MIT License