Button by Saiyed-Tanvir
#212121
1.Btn { 2 position: relative; 3 background-color: transparent; 4 border: none; 5 width: 100px; 6 height: 40px; 7 border-radius: 5px; 8 cursor: pointer; 9 transition: all .3s; 10} 11 12.text { 13 width: 100%; 14 height: 100%; 15 background-color: rgba(230, 230, 230, 0.466); 16 border: none; 17 border-radius: 7px; 18 backdrop-filter: blur(5px); 19 color: rgb(26, 26, 26); 20 display: flex; 21 font-weight: 600; 22 align-items: center; 23 justify-content: center; 24 letter-spacing: 0.8px; 25} 26 27.BG { 28 position: absolute; 29 width: 100%; 30 height: 100%; 31 background-image: linear-gradient(147deg, #E5FFFF, #2525ff); 32 z-index: -1; 33 left: 6px; 34 top: 6px; 35 border-radius: 7px; 36 pointer-events: none; 37 transition: all .3s; 38} 39 40.Btn:hover { 41 transform: translateY(-2px) translateX(-2px); 42} 43 44.Btn:hover .BG { 45 transform: translateY(2px) translateX(2px); 46} 47 48.Btn:active { 49 transform: translateY(7px) translateX(7px); 50} 51 52.Btn:active .BG { 53 transform: translateY(-7px) translateX(-7px); 54}
563 views
Variation of abutton
MIT License