#e8e8e8
1button { 2 width: 180px; 3 height: 55px; 4 border-radius: 50px; 5 border: solid 4px rgba(255, 255, 255, 0); 6 background-clip: padding-box; 7 box-shadow: 0 4px 20px -2px rgba(39, 94, 254, 0.5); 8 background-color: hsl(241deg 44% 49%); 9 font-size: 20px; 10 letter-spacing: 1px; 11 font-weight: 100; 12 position: relative; 13 cursor: pointer; 14 color: white; 15} 16 17.loading { 18 position: absolute; 19 top: 50%; 20 left: 50%; 21 transform: translate(-50%,-50%); 22 width: 100%; 23 height: 100%; 24 display: flex; 25 align-items: center; 26 justify-content: center; 27 gap: 7px; 28 z-index: 0; 29} 30 31.loading i { 32 width: 5px; 33 height: 5px; 34 background-color: white; 35 display: inline-flex; 36 border-radius: 100%; 37 animation-name: loading5234; 38 animation-iteration-count: infinite; 39 animation-duration: 1s; 40} 41 42@keyframes loading5234 { 43 100% { 44 opacity: 0; 45 } 46} 47 48input:checked + button { 49 transition-delay: 4s; 50 background-color: #31cb20; 51 box-shadow: 0 4px 20px -2px rgb(49 203 32); 52} 53 54.title, .approved { 55 position: absolute; 56 left: 50%; 57 top: 50%; 58 transform: translate(-50%,-50%); 59 width: 100%; 60 display: block; 61 font-size: 15px; 62} 63 64button .title { 65 background-color: hsl(241deg 44% 49%); 66 width: 90%; 67} 68 69input:checked + button .approved { 70 transition-delay: 4s; 71 visibility: visible; 72 opacity: 1; 73 background-color: #31cb20; 74 width: 90%; 75} 76 77input:checked + button .title { 78 visibility: hidden; 79 opacity: 0; 80 transition: all .5s ease; 81} 82 83input:not(:checked) + button .approved { 84 visibility: hidden; 85 opacity: 1; 86} 87 88input { 89 position: absolute; 90 left: 50%; 91 top: 50%; 92 transform: translate(-50%,-50%); 93 z-index: 999; 94 outline: none; 95 width: 210px; 96 height: 60px; 97 border-radius: 50px; 98 margin: 0; 99 opacity: 0; 100 cursor: pointer; 101} 102 103.plane { 104 width: 55px; 105 height: 55px; 106 border-radius: 100%; 107 position: absolute; 108 left: 0; 109 z-index: 9; 110 top: 0; 111 transition: none; 112 background-color: transparent; 113 opacity: 0; 114} 115 116.plane svg { 117 width: 45px; 118 height: 45px; 119 position: absolute; 120 left: 0px; 121 top: 0px; 122 transform: rotate(90deg) translate(-50%,-40%) scale(1); 123 transition: all 0s ease; 124 fill: #3c4a57; 125} 126 127input:checked + button .plane { 128 animation: airplane-route 4s forwards; 129 animation-timing-function: cubic-bezier(0, 0, 0, 0); 130} 131 132@keyframes airplane-route { 133 0% { 134 left: -300px; 135 opacity: 1; 136 transform: scale(2); 137 } 138 139 20% { 140 left: 0px; 141 transform: scale(1); 142 opacity: 1; 143 } 144 145 40% { 146 left: 100%; 147 opacity: 1; 148 transform: translateX(-100%); 149 } 150 151 60% { 152 left: 100%; 153 opacity: 1; 154 transform: translateX(-100%) translateY(-6%) rotate(180deg); 155 } 156 157 80% { 158 left: 0%; 159 opacity: 1; 160 top: -6px; 161 transform: translateX(0%) rotate(180deg); 162 } 163 164 100% { 165 left: 0%; 166 opacity: 1; 167 transform: translateX(0%) rotate(360deg); 168 } 169} 170
Comments
MIT License