#212121
1button { 2 --sunGradient: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%); 3 --moonGradient: linear-gradient(to top, #cc208e 0%, #6713d2 100%); 4 display: flex; 5 justify-content: center; 6 align-items: center; 7 position: relative; 8 width: 140px; 9 height: 60px; 10 color: white; 11 font-size: 1em; 12 font-weight: bold; 13 text-transform: uppercase; 14 border-radius: 15px; 15 background-color: transparent; 16 transition: 0.5s; 17 overflow: hidden; 18 border: 4px solid black; 19} 20 21button:hover { 22 box-shadow: -15px -15px 500px white; 23 transition: 0.2s; 24} 25 26button:hover span { 27 background: var(--sunGradient); 28} 29 30.state { 31 position: absolute; 32 display: flex; 33 justify-content: center; 34 align-items: center; 35 border-radius: inherit; 36 transition: 0.4s; 37 width: 85%; 38 height: 82%; 39 border: 4px solid black; 40} 41 42#sun { 43 display: none; 44 background-color: #212121; 45 opacity: 0.85; 46} 47 48#moon { 49 background-color: #212121; 50 opacity: 0.85; 51} 52 53button:hover #sun { 54 display: flex; 55} 56 57button:hover #moon { 58 display: none; 59} 60 61button:hover .lightRotation { 62 animation: 1s linear reverse infinite rotation413; 63} 64 65button:hover .lightRotation2 { 66 animation: 2s linear infinite rotation_413; 67} 68 69button:hover .lightRotation3 { 70 animation: 10s linear reverse infinite rotation_413; 71} 72 73button:hover .lightRotation4 { 74 animation: 3s linear infinite rotation_413; 75} 76 77.lightRotation { 78 position: absolute; 79 transition: 0.4s; 80 z-index: -1; 81 width: 60px; 82 height: 500px; 83 transform: rotate(50deg); 84 border-radius: inherit; 85 background: var(--moonGradient); 86} 87 88.lightRotation2 { 89 position: absolute; 90 transition: 0.4s; 91 z-index: -1; 92 width: 75px; 93 height: 500px; 94 transform: rotate(110deg); 95 border-radius: inherit; 96 background: var(--moonGradient); 97} 98 99.lightRotation3 { 100 position: absolute; 101 transition: 0.4s; 102 z-index: -1; 103 width: 40px; 104 height: 260px; 105 border-radius: inherit; 106 background: var(--moonGradient); 107} 108 109.lightRotation4 { 110 position: absolute; 111 transition: 0.4s; 112 z-index: -1; 113 width: 24px; 114 height: 220px; 115 transform: rotate(100deg); 116 border-radius: inherit; 117 background: var(--moonGradient); 118} 119 120@keyframes rotation_413 { 121 from { 122 transform: rotate(0deg) 123 } 124 125 to { 126 transform: rotate(360deg) 127 } 128} 129
791 views
791 views
Comments
Variations
1 MIT License