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