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/* <main-style> ============================ */ 11.swallow__icon { 12 width: 2rem; 13 height: 2rem; 14 padding: .25rem; 15 background-color: rgb(29, 29, 31, .7); 16 backdrop-filter: saturate(180%) blur(20px); 17 border: solid 1px rgba(66,66,69,0.7); 18 position: relative; 19} 20 21.swallow__icon span { 22 width: 1.5rem; 23 height: .563rem; 24 position: absolute; 25 top: calc(.25rem + .563rem - 1px); 26 left: calc(.25rem - 1px); 27 transition: transform 1s cubic-bezier(.86, 0, .07, 1), 28 transform-origin 1s cubic-bezier(.86, 0, .07, 1); 29} 30 31.swallow__icon span:before, 32.swallow__icon span:after { 33 content: ""; 34 width: .75rem; 35 height: .125rem; 36 background-color: rgb(245, 245, 247); 37 position: absolute; 38 bottom: 0; 39 transition: transform 1s cubic-bezier(.86, 0, .07, 1), 40 transform-origin 1s cubic-bezier(.86, 0, .07, 1); 41} 42 43.swallow__icon span:before { 44 right: 50%; 45 border-radius: 2px 0 0 2px; 46 transform-origin: 100% 100%; 47 transform: rotate(40deg); 48} 49 50.swallow__icon span:after { 51 left: 50%; 52 border-radius: 0 2px 2px 0; 53 transform-origin: 0 100%; 54 transform: rotate(-40deg); 55} 56 57.swallow__icon:hover span { 58 transform: translateY(-8px); 59} 60 61.swallow__icon:hover span:before { 62 transform-origin: 100% 0; 63 transform: rotate(-40deg); 64} 65 66.swallow__icon:hover span:after { 67 transform-origin: 0 0; 68 transform: rotate(40deg); 69}
Β
1.1K views
1.1K views
MIT License