Button by ArturCodeCraft
#212121
1/* <reset-style> ============================ */ 2button { 3 border: none; 4 background: none; 5 padding: 0; 6 margin: 0; 7 cursor: pointer; 8 font-family: inherit; 9} 10/* ============================ */ 11/* <style for bg> ======== */ 12.background { 13 border-radius: 16px; 14 border: 1px solid #1a1a1a; 15 background: rgba(74, 74, 74, 0.39); 16 mix-blend-mode: luminosity; 17 box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.20); 18 backdrop-filter: blur(15px); 19 width: 65px; 20 height: 65px; 21 display: flex; 22 justify-content: center; 23 align-items: center; 24} 25 26/* <style for menu__icon> ======== */ 27.menu__icon { 28 width: 28px; 29 height: 28px; 30 padding: 3px; 31 display: flex; 32 flex-direction: column; 33 justify-content: space-around; 34 align-items: center; 35} 36 37.menu__icon span { 38 width: 100%; 39 height: 0.125rem; 40 border-radius: 0.125rem; 41 background-color: rgb(0, 122, 255); 42 box-shadow: 0 .5px 2px 0 hsla(0, 0%, 0%, .2); 43 transition: transform .4s, background-color .4s, width .4s, opacity .4s; 44} 45 46.menu__icon span:nth-child(2) { 47 width: 60%; 48} 49 50.menu__icon:hover span:nth-child(1) { 51 background-color: rgb(255, 59, 48); 52 transform: translateY(7.5px) rotate(-45deg); 53} 54 55.menu__icon:hover span:nth-child(2) { 56 width: 0; 57 opacity: 0; 58} 59 60.menu__icon:hover span:nth-child(3) { 61 background-color: rgb(255, 59, 48); 62 transform: translateY(-7.5px) rotate(45deg); 63}
Β
973 views
Variation of abutton
MIT License