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/* <main-style> ============================ */ 12.theme__icon { 13 width: 32px; 14 height: 32px; 15 padding: 4px; 16 overflow: hidden; 17 position: relative; 18} 19 20.theme__icon > :nth-child(1) { 21 width: 14px; 22 height: 14px; 23 border-radius: 24px; 24 border: 1px solid #212121; 25 position: absolute; 26 top: 50%; 27 left: 50%; 28 transform: translate(-50%, -50%); 29 background-color: rgb(255, 204, 0); 30 transition: width .4s, height .4s, border .4s, background-color .4s; 31 z-index: 10; 32} 33 34.theme__icon:hover > :nth-child(1) { 35 width: 24px; 36 height: 24px; 37 border: 1px solid rgb(245, 245, 247); 38 background-color: rgb(245, 245, 247); 39} 40 41.theme__icon > :nth-child(2) { 42 width: 24px; 43 height: 24px; 44 border-radius: 24px; 45 position: absolute; 46 top: 50%; 47 left: 50%; 48 transform: translate(-50%, -50%); 49 transition: transform .4s; 50} 51 52.theme__icon:hover > :nth-child(2) { 53 transform: translate(-50%, -50%) rotate(-45deg) scale(.8); 54} 55 56.theme__icon > :nth-child(2) > :nth-child(1) { 57 display: block; 58 width: 2px; 59 height: 24px; 60 border-radius: 2px; 61 position: relative; 62 top: 0; 63 left: 50%; 64 transform: translateX(-50%); 65 background-color: rgb(255, 204, 0); 66} 67 68.theme__icon > :nth-child(2) > :nth-child(2) { 69 display: block; 70 width: 24px; 71 height: 2px; 72 border-radius: 2px; 73 position: relative; 74 top: -54%; 75 left: 50%; 76 transform: translateX(-50%); 77 background-color: rgb(255, 204, 0); 78} 79 80.theme__icon > :nth-child(2) > :nth-child(3) { 81 display: block; 82 width: 24px; 83 height: 2px; 84 border-radius: 2px; 85 position: relative; 86 top: -60%; 87 left: 50%; 88 transform: translateX(-50%) rotate(45deg); 89 background-color: rgb(255, 204, 0); 90} 91 92.theme__icon > :nth-child(2) > :nth-child(4) { 93 display: block; 94 width: 24px; 95 height: 2px; 96 border-radius: 2px; 97 position: relative; 98 top: -70%; 99 left: 50%; 100 transform: translateX(-50%) rotate(-45deg); 101 background-color: rgb(255, 204, 0); 102} 103 104.theme__icon > :nth-child(3) { 105 width: 20px; 106 height: 20px; 107 border-radius: 24px; 108 position: absolute; 109 top: 50%; 110 left: 100%; 111 transform: translateY(-50%); 112 background-color: #212121; 113 transition: top .4s, left .4s; 114 transition-delay: .2s; 115 z-index: 20; 116} 117 118.theme__icon:hover > :nth-child(3) { 119 top: 35%; 120 left: 40%; 121}
Β
893 views
Variation of abutton
MIT License