#e8e8e8
1.card { 2 width: 8em; 3 font-family: Montserrat; 4 height: 8em; 5 background: #ae47c2; 6 box-shadow: inset -25px -25px 0px #a73dbd, 10px 10px 10px rgba(0,0,0,0.2); 7 overflow: hidden; 8 border-radius: 50%; 9 transition: .4s ease-in-out; 10} 11 12.card:before { 13 position: relative; 14 text-align: center; 15 content: "Code Planet"; 16 color: white; 17 border-radius: 50%; 18 top: 3.4em; 19 left: 0.85em; 20 font-weight: 600; 21} 22 23.card .heading { 24 opacity: 0; 25 transition: .1s ease-in-out; 26} 27 28.card .heading span { 29 transition: .4s ease-in-out; 30} 31 32.card button { 33 opacity: 0; 34 transition: .001s ease-in-out; 35} 36 37.card .heading:hover { 38 background: linear-gradient(to right, #fff 20%,orange 40%,yellow 60%, skyblue 80%, #ffe4f2 100%); 39 background-size: 200% auto; 40 -webkit-background-clip: text; 41 background-clip: text; 42 -webkit-text-fill-color: transparent; 43 animation: gradient_6346 5s linear infinite; 44 letter-spacing: 1px; 45 scale: 1.01; 46} 47 48@keyframes gradient_6346 { 49 to { 50 background-position: 200% center; 51 } 52} 53 54.card .content { 55 opacity: 0; 56 transition: .1s ease-in-out; 57} 58 59.card:hover { 60 cursor: pointer; 61 display: flex; 62 flex-direction: column; 63 width: 15.4em; 64 height: 22.9em; 65 padding-top: .4em; 66 padding-bottom: 1.5em; 67 background-color: #171717; 68 border-radius: 20px; 69 box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset; 70 background: linear-gradient(270deg, #ce68d9, #45c6db, #45db79); 71 background-size: 800% 800%; 72 -webkit-animation: AnimationName 3s ease infinite; 73 -moz-animation: AnimationName 3s ease infinite; 74 animation: AnimationName 3s ease infinite; 75 transition: .4s ease-in-out; 76} 77 78.card:hover .heading { 79 opacity: 1; 80 transition: .8s ease-in-out; 81} 82 83.card:hover .content { 84 opacity: 1; 85 transition: .8s ease-in-out; 86} 87 88.card:hover button { 89 opacity: 1; 90 transition: .4s ease-in-out; 91} 92 93.card:hover::before { 94 opacity: 0; 95} 96 97.heading { 98 display: flex; 99 flex-direction: column; 100 color: white; 101 font-size: 1em; 102 text-align: center; 103 padding-bottom: 1em; 104 font-weight: bold; 105 transition: .4s ease-in-out; 106} 107 108.content { 109 display: flex; 110 flex-direction: column; 111 align-items: center; 112 justify-content: center; 113 padding-bottom: 2em; 114} 115 116.item { 117 font-size: 0.8em; 118 margin: 0.5em; 119 padding: 0.8em; 120 display: flex; 121 color: white; 122 align-items: center; 123 justify-content: center; 124 gap: 0.8em; 125 border-radius: 15px; 126 transition: .4s ease-in-out; 127 box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; 128} 129 130.item:hover { 131 cursor: pointer; 132 scale: 0.9; 133 box-shadow: none; 134} 135 136.item:active { 137 cursor: pointer; 138 scale: 0.8; 139 box-shadow: inset 2px 5px 10px rgba(0,0,0,0.2); 140} 141 142.item--create { 143 padding-left: 2.5em; 144 padding-right: 2.5em; 145} 146 147.item--post { 148 padding-left: 3em; 149 padding-right: 3em; 150} 151 152.item--inspire { 153 padding-left: 2.5em; 154 padding-right: 2.5em; 155} 156 157button { 158 padding: 0.8em; 159 width: 14em; 160 border-radius: 10px; 161 align-self: center; 162 outline: none; 163 font-weight: bold; 164 border: 1px solid white; 165 background-color: transparent; 166 color: white; 167 transition: .4s ease-in-out; 168} 169 170button::after { 171 content: "(Hold Me)"; 172 opacity: 0; 173 position: absolute; 174} 175 176button::before { 177 content: "∞"; 178 font-size: 3.5em; 179 position: absolute; 180 opacity: 0; 181 left: 1.6em; 182 top: -0.33em; 183 transition: .4s ease-in-out; 184} 185 186button:hover { 187 cursor: pointer; 188 color: black; 189 background: rgba(255, 255, 255, 0.2); 190 border-radius: 16px; 191 box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 192 backdrop-filter: blur(5px); 193 -webkit-backdrop-filter: blur(5px); 194 border: 1px solid rgba(255, 255, 255, 0.3); 195} 196 197button:hover::after { 198 position: relative; 199 opacity: 1; 200 font-size: 0.7em; 201} 202 203@keyframes AnimationName { 204 0% { 205 background-position: 0% 50% 206 } 207 208 50% { 209 background-position: 100% 50% 210 } 211 212 100% { 213 background-position: 0% 50% 214 } 215} 216 217button:active { 218 scale: 1.1; 219 opacity: 1; 220 color: transparent; 221 background: linear-gradient(90deg, #ce68d9, #45c6db, #45db79, #9f45b0, #e54ed0, #ffe4f2); 222 background-size: 800% 800%; 223 -webkit-animation: AnimationName 1s ease infinite; 224 -moz-animation: AnimationName 1s ease infinite; 225 animation: AnimationName 1s ease infinite; 226} 227 228button:active::before { 229 color: white; 230 opacity: 1; 231}
1.6K views
1.6K views
Comments
MIT License