This post is saved as a draft.
This post is saved as a draft.
#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 border-radius: 7px; 11 cursor: pointer; 12 transition: all 0.3s; 13} 14 15.img { 16 width: 40px; 17} 18 19.svgContainer { 20 width: 100%; 21 height: 100%; 22 display: flex; 23 align-items: center; 24 justify-content: center; 25 background-color: transparent; 26 backdrop-filter: blur(0px); 27 letter-spacing: 0.8px; 28 border-radius: 10px; 29 transition: all 0.3s; 30 border: 1px solid rgba(156, 156, 156, 0.466); 31} 32 33.BG { 34 position: absolute; 35 content: ""; 36 width: 100%; 37 height: 100%; 38 background: #f9d438; 39 z-index: -1; 40 border-radius: 10px; 41 pointer-events: none; 42 transition: all 0.3s; 43} 44 45.Btn:hover .BG { 46 transform: rotate(35deg); 47 transform-origin: bottom; 48} 49 50.Btn:hover .svgContainer { 51 background-color: rgba(156, 156, 156, 0.466); 52 backdrop-filter: blur(4px); 53} 54
81 views
Variation of abutton
81 views
Variation of abutton
Variations
1 MIT License