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: 32px; 29 height: 32px; 30 padding: 4px; 31 display: flex; 32 flex-direction: column; 33 justify-content: space-between; 34 transition: transform .4s; 35} 36 37.menu__icon span { 38 width: 100%; 39 height: 0.25rem; 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: width .4s, transform .4s, background-color .4s; 44} 45 46.menu__icon :nth-child(1) { 47 width: 75%; 48} 49 50.menu__icon :nth-child(2) { 51 width: 50%; 52} 53 54.menu__icon:hover { 55 transform: rotate(-90deg); 56} 57 58.menu__icon:hover span { 59 width: .25rem; 60 transform: translateX(10px); 61 background-color: rgb(255, 59, 48); 62}
Β
963 views
963 views
Variations
1 MIT License