Button by Lakshay-art
#212121
1button { 2 border: 0; 3 background: radial-gradient(ellipse at 50% 50%,black 20%,transparent 72%); 4 font-size: 17px; 5 height: 200px; 6 width: 300px; 7 zoom: 1.2; 8} 9 10.main { 11 width: 70px; 12 margin: auto; 13 position: relative; 14 transform: rotateZ(0deg); 15 isolation: isolate; 16 scale: 1; 17 transition: all 1.5s; 18} 19 20.main:hover { 21 transform: rotateZ(240deg); 22 scale: 2; 23 /* filter: drop-shadow(10px,10px,10px,white); */ 24 filter: drop-shadow(-1px -1px 5px #69e9d6); 25} 26 27.rings { 28 position: absolute; 29 width: 200px; 30 height: 100px; 31 /* background-color: #000000; */ 32 border-radius: 150px 150px 0 0; 33 background: radial-gradient(circle at 50% 100%,transparent 30%, #69e9d6 40%,#404D44 50%,#44867c 60%,#404D44 70%,transparent); 34} 35 36#saturn { 37 width: 70px; 38 height: 70px; 39 border-radius: 50%; 40 background: linear-gradient(80deg,#69e9d6,#404D44,#000000); 41} 42 43#ring1 { 44 transform: rotateX(80deg); 45 top: -20px; 46 left: -65px; 47} 48 49#ring2 { 50 transform: rotateX(-100deg); 51 left: -65px; 52 z-index: -1; 53 top: -3px; 54} 55 56.asteriods-large { 57 position: absolute; 58 width: 8px; 59 height: 10px; 60 border-radius: 15px 8px; 61 background: linear-gradient(220deg,#6f7776,#598ea3,#311515); 62 transform: rotateZ(0deg); 63 transition: all 3s; 64} 65 66#asteriod1 { 67 top: 8px; 68 height: 12px; 69 width: 12px; 70 border-radius: 50%; 71} 72 73#asteriod2 { 74 top: 35px; 75 height: 10px; 76 left: -55px; 77} 78 79#asteriod3 { 80 top: 35px; 81 height: 8px; 82 left: 85px; 83} 84 85#asteriod4 { 86 top: 40px; 87 height: 4px; 88 width: 4px; 89 left: -40px; 90} 91 92#asteriod5 { 93 top: 35px; 94 height: 4px; 95 width: 4px; 96 left: 82px; 97} 98 99.asteriods-small { 100 position: absolute; 101 width: 4px; 102 height: 3px; 103 border-radius: 15px 8px; 104 background: linear-gradient(80deg,#6f7776,#598ea3,#311515); 105 transform-origin: 50px 50px; 106 transform: rotateZ(0deg); 107 transition: all 3s; 108} 109 110#asteriod6 { 111 top: 6px; 112 left: -5px; 113 border-radius: 50%; 114} 115 116#asteriod7 { 117 top: 15px; 118 left: -35px; 119} 120 121#asteriod8 { 122 top: 35px; 123 left: 65px; 124} 125 126#asteriod9 { 127 top: 60px; 128 left: -10px; 129} 130 131#asteriod10 { 132 top: 15px; 133 left: 112px; 134} 135 136#explore { 137 position: absolute; 138 top: 32px; 139 font-size: 15px; 140 color: hsl(171, 59%, 74%); 141 left: 10px; 142 transition: all 3s; 143} 144 145.main:hover > .asteriods-large,.main:hover > .asteriods-small { 146 transform: translateX(28px); 147} 148 149.main:hover > #explore { 150 translate: -10px 20px; 151 transform: rotateZ(120deg); 152} 153 154.main:not(hover) > #explore { 155 translate: 0px; 156 transform: rotateZ(0deg); 157} 158 159.main:not(hover) > .asteriods-large,.main:not(hover) > .asteriods-small { 160 transform: translateX(0px); 161} 162 163.main:is(:active) > #explore { 164 translate: -100px 200px; 165} 166 167.main:is(:active) { 168 translate: -200px; 169} 170 171
2.2K views
2.2K views
MIT License