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 change-theme__icon> ======== */ 27.change-theme__icon { 28 width: 32px; 29 height: 32px; 30 display: flex; 31 justify-content: center; 32 align-items: center; 33 position: relative; 34 overflow: hidden; 35} 36 37.icon-sun, 38.icon-moon { 39 display: flex; 40 justify-content: center; 41 align-items: center; 42 position: absolute; 43} 44 45/* .icon-sun */ 46.icon-sun { 47 animation: ease reverse-change-theme-sun .6s forwards; 48} 49 50.change-theme__icon:hover .icon-sun { 51 animation: ease change-theme-sun .4s forwards; 52} 53 54@keyframes reverse-change-theme-sun { 55 0% { 56 transform: rotate(-45deg) scale(.8); 57 opacity: 0; 58 } 59 60 50% { 61 transform: rotate(8deg); 62 } 63 64 100% { 65 transform: rotate(0deg) scale(1); 66 opacity: 1; 67 } 68} 69 70@keyframes change-theme-sun { 71 0% { 72 transform: rotate(0deg) scale(1); 73 opacity: 1; 74 } 75 76 100% { 77 transform: rotate(-45deg) scale(.8); 78 opacity: 0; 79 } 80} 81 82/* .icon-moon */ 83.icon-moon { 84 animation: ease reverse-change-theme-moon .4s forwards; 85} 86 87.change-theme__icon:hover .icon-moon { 88 animation: change-theme-moon .6s forwards; 89} 90 91@keyframes change-theme-moon { 92 0% { 93 transform: rotate(-45deg) scale(.8); 94 opacity: 0; 95 } 96 97 50% { 98 transform: rotate(8deg); 99 } 100 101 100% { 102 transform: rotate(0deg) scale(1); 103 opacity: 1; 104 } 105} 106 107@keyframes reverse-change-theme-moon { 108 0% { 109 transform: rotate(0deg) scale(1); 110 opacity: 1; 111 } 112 113 100% { 114 transform: rotate(-45deg) scale(.8); 115 opacity: 0; 116 } 117}
Β
706 views
Variation of abutton
MIT License