#e8e8e8
1.Btn { 2 width: 45px; 3 height: 45px; 4 display: flex; 5 align-items: center; 6 justify-content: center; 7 border: none; 8 background-color: transparent; 9 position: relative; 10 /* overflow: hidden; */ 11 border-radius: 7px; 12 cursor: pointer; 13 transition: all .3s; 14} 15 16.svgContainer { 17 width: 100%; 18 height: 100%; 19 display: flex; 20 align-items: center; 21 justify-content: center; 22 background-color: transparent; 23 backdrop-filter: blur(0px); 24 letter-spacing: 0.8px; 25 border-radius: 10px; 26 transition: all .3s; 27 border: 1px solid rgba(156, 156, 156, 0.466); 28} 29 30.BG { 31 position: absolute; 32 content: ""; 33 width: 100%; 34 height: 100%; 35 background: #181818; 36 z-index: -1; 37 border-radius: 10px; 38 pointer-events: none; 39 transition: all .3s; 40} 41 42.Btn:hover .BG { 43 transform: rotate(35deg); 44 transform-origin: bottom; 45} 46 47.Btn:hover .svgContainer { 48 background-color: rgba(156, 156, 156, 0.466); 49 backdrop-filter: blur(4px); 50} 51
2.5K views
2.5K views
Comments
MIT License