Card by Praashoo7 made with CSS

This card was created for Open-Source CSS Odyssey

#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}

.card {
  width: 8em;
  font-family: Montserrat;
  height: 8em;
  background: #ae47c2;
  box-shadow: inset -25px -25px 0px #a73dbd, 10px 10px 10px rgba(0,0,0,0.2);
  overflow: hidden;
  border-radius: 50%;
  transition: .4s ease-in-out;
}

.card:before {
  position: relative;
  text-align: center;
  content: "Code Planet";
  color: white;
  border-radius: 50%;
  top: 3.4em;
  left: 0.85em;
  font-weight: 600;
}

.card .heading {
  opacity: 0;
  transition: .1s ease-in-out;
}

.card .heading span {
  transition: .4s ease-in-out;
}

.card button {
  opacity: 0;
  transition: .001s ease-in-out;
}

.card .heading:hover {
  background: linear-gradient(to right, #fff 20%,orange 40%,yellow 60%, skyblue 80%, #ffe4f2 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient_6346 5s linear infinite;
  letter-spacing: 1px;
  scale: 1.01;
}

@keyframes gradient_6346 {
  to {
    background-position: 200% center;
  }
}

.card .content {
  opacity: 0;
  transition: .1s ease-in-out;
}

.card:hover {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  width: 15.4em;
  height: 22.9em;
  padding-top: .4em;
  padding-bottom: 1.5em;
  background-color: #171717;
  border-radius: 20px;
  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;
  background: linear-gradient(270deg, #ce68d9, #45c6db, #45db79);
  background-size: 800% 800%;
  -webkit-animation: AnimationName 3s ease infinite;
  -moz-animation: AnimationName 3s ease infinite;
  animation: AnimationName 3s ease infinite;
  transition: .4s ease-in-out;
}

.card:hover .heading {
  opacity: 1;
  transition: .8s ease-in-out;
}

.card:hover .content {
  opacity: 1;
  transition: .8s ease-in-out;
}

.card:hover button {
  opacity: 1;
  transition: .4s ease-in-out;
}

.card:hover::before {
  opacity: 0;
}

.heading {
  display: flex;
  flex-direction: column;
  color: white;
  font-size: 1em;
  text-align: center;
  padding-bottom: 1em;
  font-weight: bold;
  transition: .4s ease-in-out;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 2em;
}

.item {
  font-size: 0.8em;
  margin: 0.5em;
  padding: 0.8em;
  display: flex;
  color: white;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  border-radius: 15px;
  transition: .4s ease-in-out;
  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;
}

.item:hover {
  cursor: pointer;
  scale: 0.9;
  box-shadow: none;
}

.item:active {
  cursor: pointer;
  scale: 0.8;
  box-shadow: inset 2px 5px 10px rgba(0,0,0,0.2);
}

.item--create {
  padding-left: 2.5em;
  padding-right: 2.5em;
}

.item--post {
  padding-left: 3em;
  padding-right: 3em;
}

.item--inspire {
  padding-left: 2.5em;
  padding-right: 2.5em;
}

button {
  padding: 0.8em;
  width: 14em;
  border-radius: 10px;
  align-self: center;
  outline: none;
  font-weight: bold;
  border: 1px solid white;
  background-color: transparent;
  color: white;
  transition: .4s ease-in-out;
}

button::after {
  content: "(Hold Me)";
  opacity: 0;
  position: absolute;
}

button::before {
  content: "∞";
  font-size: 3.5em;
  position: absolute;
  opacity: 0;
  left: 1.6em;
  top: -0.33em;
  transition: .4s ease-in-out;
}

button:hover {
  cursor: pointer;
  color: black;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

button:hover::after {
  position: relative;
  opacity: 1;
  font-size: 0.7em;
}

@keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

button:active {
  scale: 1.1;
  opacity: 1;
  color: transparent;
  background: linear-gradient(90deg, #ce68d9, #45c6db, #45db79, #9f45b0, #e54ed0, #ffe4f2);
  background-size: 800% 800%;
  -webkit-animation: AnimationName 1s ease infinite;
  -moz-animation: AnimationName 1s ease infinite;
  animation: AnimationName 1s ease infinite;
}

button:active::before {
  color: white;
  opacity: 1;
}

Toggle prefixes

1.6K views

Comments

No variations yet

MIT License

Copyright - 2023 Praashoo7 (Prashant) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.