1 
  2<!-- From Uiverse.io by Praashoo7 -->
  3<div class="main">
  4  <div class="card">
  5    <div class="fl">
  6      <div class="fullscreen">
  7        <svg class="fullscreen_svg" viewBox="0 0 100 100"><path d="M3.563-.004a3.573 3.573 0 0 0-3.527 4.09l-.004-.02v28.141c0 1.973 1.602 3.57 3.57 3.57s3.57-1.598 3.57-3.57V12.218v.004l22.461 22.461a3.571 3.571 0 0 0 6.093-2.527c0-.988-.398-1.879-1.047-2.523L12.218 7.172h19.989c1.973 0 3.57-1.602 3.57-3.57s-1.598-3.57-3.57-3.57H4.035a3.008 3.008 0 0 0-.473-.035zM96.333 0l-.398.035.02-.004h-28.16a3.569 3.569 0 0 0-3.57 3.57 3.569 3.569 0 0 0 3.57 3.57h19.989L65.323 29.632a3.555 3.555 0 0 0-1.047 2.523 3.571 3.571 0 0 0 6.093 2.527L92.83 12.221v19.985a3.569 3.569 0 0 0 3.57 3.57 3.569 3.569 0 0 0 3.57-3.57V4.034v.004a3.569 3.569 0 0 0-3.539-4.043l-.105.004zM3.548 64.23A3.573 3.573 0 0 0 .029 67.8v28.626-.004l.016.305-.004-.016.004.059v-.012l.039.289-.004-.023.023.121-.004-.023c.074.348.191.656.34.938l-.008-.02.055.098-.008-.02.148.242-.008-.012.055.082-.008-.012c.199.285.43.531.688.742l.008.008.031.027.004.004c.582.461 1.32.742 2.121.762h.004l.078.004h28.61a3.569 3.569 0 0 0 3.57-3.57 3.569 3.569 0 0 0-3.57-3.57H12.224l22.461-22.461a3.569 3.569 0 0 0-2.492-6.125l-.105.004h.008a3.562 3.562 0 0 0-2.453 1.074L7.182 87.778V67.793a3.571 3.571 0 0 0-3.57-3.57h-.055.004zm92.805 0a3.573 3.573 0 0 0-3.519 3.57v19.993-.004L70.373 65.328a3.553 3.553 0 0 0-2.559-1.082h-.004a3.573 3.573 0 0 0-3.566 3.57c0 1.004.414 1.91 1.082 2.555l22.461 22.461H67.802a3.57 3.57 0 1 0 0 7.14h28.606c.375 0 .742-.059 1.082-.168l-.023.008.027-.012-.02.008.352-.129-.023.008.039-.02-.02.008.32-.156-.02.008.023-.016-.008.008c.184-.102.34-.207.488-.32l-.008.008.137-.113-.008.004.223-.211.008-.008c.156-.164.301-.34.422-.535l.008-.016-.008.016.008-.02.164-.285.008-.02-.008.016.008-.02c.098-.188.184-.406.246-.633l.008-.023-.004.008.008-.023a3.44 3.44 0 0 0 .121-.852v-.004l.004-.078V67.804a3.569 3.569 0 0 0-3.57-3.57h-.055.004z"></path></svg>
  8      </div>
  9    </div>
 10    <div class="card_content">
 11      <button>Code to Infinity!</button>
 12    </div>
 13    <div class="card_back"></div>
 14  </div>
 15  <div class="data">
 16    <div class="img">
 17      <svg viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg">
 18      <g stroke-linecap="butt" fill="none" stroke-width="2.00">
 19      <path d="M 14.06 0.00
 20        Q 13.33 4.09 13.93 7.52
 21        A 1.04 1.02 -78.7 0 0 14.37 8.19
 22        L 32.87 20.19" stroke="#59afb1"></path>
 23      <path d="M 32.87 20.19
 24        L 42.25 26.79" stroke="#4fa6a8"></path>
 25      <path d="M 42.25 26.79
 26        C 41.40 28.26 24.14 34.92 21.32 36.20" stroke="#69cbc0"></path>
 27      <path d="M 21.32 36.20
 28        Q 15.81 38.21 11.00 41.21" stroke="#6fcdbb"></path>
 29      <path d="M 11.00 41.21
 30        L 9.75 40.96" stroke="#5ec8ab"></path>
 31      <path d="M 9.75 40.96
 32        Q 5.99 37.71 1.71 35.19
 33        A 1.00 1.00 0.0 0 0 0.22 35.85
 34        L 0.00 36.94" stroke="#5cae9e"></path>
 35      <path d="M 79.95 6.12
 36        L 62.46 11.32" stroke="#3190a6"></path>
 37      <path d="M 62.46 11.32
 38        Q 47.42 14.67 32.87 20.19" stroke="#3a96a3"></path>
 39      <path d="M 80.00 11.06
 40        L 64.50 17.46" stroke="#22a3be"></path>
 41      <path d="M 64.50 17.46
 42        L 62.46 11.32" stroke="#28879d"></path>
 43      <path d="M 64.50 17.46
 44        L 43.00 26.96" stroke="#2ba9bb"></path>
 45      <path d="M 43.00 26.96
 46        L 42.25 26.79" stroke="#4ab2b2"></path>
 47      <path d="M 80.00 52.31
 48        Q 71.64 45.91 62.46 40.67" stroke="#45ced3"></path>
 49      <path d="M 62.46 40.67
 50        Q 62.43 36.88 58.50 36.79" stroke="#13636e"></path>
 51      <path d="M 58.50 36.79
 52        Q 50.07 32.95 43.00 26.96" stroke="#45ced3"></path>
 53      <path d="M 58.50 36.79
 54        Q 55.85 40.04 56.86 44.07
 55        C 57.53 46.71 60.02 47.68 61.77 45.19
 56        Q 61.91 44.99 61.94 44.74
 57        L 62.46 40.67" stroke="#326b65"></path>
 58      <path d="M 40.81 79.86
 59        Q 46.22 74.94 52.34 70.94
 60        A 1.00 1.00 0.0 0 0 52.39 69.30
 61        Q 44.74 63.65 43.10 62.62
 62        Q 34.11 56.98 32.50 55.79" stroke="#59d4b5"></path>
 63      <path d="M 32.50 55.79
 64        C 36.74 55.42 30.64 48.79 29.79 47.81
 65        C 27.54 45.21 26.34 42.09 24.05 39.44
 66        Q 22.66 37.82 21.32 36.20" stroke="#6ad8c5"></path>
 67      <path d="M 48.75 39.07
 68        A 2.30 2.30 0.0 0 0 46.45 36.77
 69        L 46.05 36.77
 70        A 2.30 2.30 0.0 0 0 43.75 39.07
 71        L 43.75 44.21
 72        A 2.30 2.30 0.0 0 0 46.05 46.51
 73        L 46.45 46.51
 74        A 2.30 2.30 0.0 0 0 48.75 44.21
 75        L 48.75 39.07" stroke="#326b65"></path>
 76      <path d="M 58.63 54.41
 77        C 54.90 57.18 50.72 56.87 46.91 54.39
 78        A 1.00 0.99 51.9 0 0 46.04 54.28
 79        C 42.37 55.52 43.88 58.13 46.28 59.41
 80        Q 53.38 63.20 60.15 58.94
 81        C 62.54 57.43 62.47 54.80 59.41 54.23
 82        A 1.00 1.00 0.0 0 0 58.63 54.41" stroke="#326b65"></path>
 83      <path d="M 9.75 40.96
 84        Q 5.15 43.50 0.05 44.46" stroke="#4bb793"></path>
 85      <path d="M 32.50 55.79
 86        L 11.00 41.21" stroke="#5fd6b0"></path>
 87      <path d="M 11.19 80.00
 88        Q 12.51 79.61 11.57 78.67
 89        Q 5.99 73.11 1.70 65.70
 90        C 1.28 64.97 0.74 64.76 0.00 65.19" stroke="#48d08e"></path>
 91      </g>
 92      <path d="M 0.00 0.00
 93        L 14.06 0.00
 94        Q 13.33 4.09 13.93 7.52
 95        A 1.04 1.02 -78.7 0 0 14.37 8.19
 96        L 32.87 20.19
 97        L 42.25 26.79
 98        C 41.40 28.26 24.14 34.92 21.32 36.20
 99        Q 15.81 38.21 11.00 41.21
100        L 9.75 40.96
101        Q 5.99 37.71 1.71 35.19
102        A 1.00 1.00 0.0 0 0 0.22 35.85
103        L 0.00 36.94
104        L 0.00 0.00
105        Z" fill="#6ebfb6"></path>
106      <path d="M 14.06 0.00
107        L 80.00 0.00
108        L 79.95 6.12
109        L 62.46 11.32
110        Q 47.42 14.67 32.87 20.19
111        L 14.37 8.19
112        A 1.04 1.02 -78.7 0 1 13.93 7.52
113        Q 13.33 4.09 14.06 0.00
114        Z" fill="#439eac"></path>
115      <path d="M 79.95 6.12
116        L 80.00 11.06
117        L 64.50 17.46
118        L 62.46 11.32
119        L 79.95 6.12
120        Z" fill="#1f81a0"></path>
121      <path d="M 62.46 11.32
122        L 64.50 17.46
123        L 43.00 26.96
124        L 42.25 26.79
125        L 32.87 20.19
126        Q 47.42 14.67 62.46 11.32
127        Z" fill="#308d99"></path>
128      <path d="M 80.00 11.06
129        L 80.00 52.31
130        Q 71.64 45.91 62.46 40.67
131        Q 62.43 36.88 58.50 36.79
132        Q 50.07 32.95 43.00 26.96
133        L 64.50 17.46
134        L 80.00 11.06
135        Z" fill="#25c5dc"></path>
136      <path d="M 42.25 26.79
137        L 43.00 26.96
138        Q 50.07 32.95 58.50 36.79
139        Q 55.85 40.04 56.86 44.07
140        C 57.53 46.71 60.02 47.68 61.77 45.19
141        Q 61.91 44.99 61.94 44.74
142        L 62.46 40.67
143        Q 71.64 45.91 80.00 52.31
144        L 80.00 80.00
145        L 40.81 79.86
146        Q 46.22 74.94 52.34 70.94
147        A 1.00 1.00 0.0 0 0 52.39 69.30
148        Q 44.74 63.65 43.10 62.62
149        Q 34.11 56.98 32.50 55.79
150        C 36.74 55.42 30.64 48.79 29.79 47.81
151        C 27.54 45.21 26.34 42.09 24.05 39.44
152        Q 22.66 37.82 21.32 36.20
153        C 24.14 34.92 41.40 28.26 42.25 26.79
154        Z
155        M 48.75 39.07
156        A 2.30 2.30 0.0 0 0 46.45 36.77
157        L 46.05 36.77
158        A 2.30 2.30 0.0 0 0 43.75 39.07
159        L 43.75 44.21
160        A 2.30 2.30 0.0 0 0 46.05 46.51
161        L 46.45 46.51
162        A 2.30 2.30 0.0 0 0 48.75 44.21
163        L 48.75 39.07
164        Z
165        M 58.63 54.41
166        C 54.90 57.18 50.72 56.87 46.91 54.39
167        A 1.00 0.99 51.9 0 0 46.04 54.28
168        C 42.37 55.52 43.88 58.13 46.28 59.41
169        Q 53.38 63.20 60.15 58.94
170        C 62.54 57.43 62.47 54.80 59.41 54.23
171        A 1.00 1.00 0.0 0 0 58.63 54.41
172        Z" fill="#64d6ca"></path>
173      <path d="M 9.75 40.96
174        Q 5.15 43.50 0.05 44.46
175        L 0.00 36.94
176        L 0.22 35.85
177        A 1.00 1.00 0.0 0 1 1.71 35.19
178        Q 5.99 37.71 9.75 40.96
179        Z" fill="#499c85"></path>
180      <path d="M 21.32 36.20
181        Q 22.66 37.82 24.05 39.44
182        C 26.34 42.09 27.54 45.21 29.79 47.81
183        C 30.64 48.79 36.74 55.42 32.50 55.79
184        L 11.00 41.21
185        Q 15.81 38.21 21.32 36.20
186        Z" fill="#70dac0"></path>
187      <rect rx="2.30" height="9.74" width="5.00" y="36.77" x="43.75" fill="#000000"></rect>
188      <path d="M 58.50 36.79
189        Q 62.43 36.88 62.46 40.67
190        L 61.94 44.74
191        Q 61.91 44.99 61.77 45.19
192        C 60.02 47.68 57.53 46.71 56.86 44.07
193        Q 55.85 40.04 58.50 36.79
194        Z" fill="#000000"></path>
195      <path d="M 9.75 40.96
196        L 11.00 41.21
197        L 32.50 55.79
198        Q 34.11 56.98 43.10 62.62
199        Q 44.74 63.65 52.39 69.30
200        A 1.00 1.00 0.0 0 1 52.34 70.94
201        Q 46.22 74.94 40.81 79.86
202        L 11.19 80.00
203        Q 12.51 79.61 11.57 78.67
204        Q 5.99 73.11 1.70 65.70
205        C 1.28 64.97 0.74 64.76 0.00 65.19
206        L 0.05 44.46
207        Q 5.15 43.50 9.75 40.96
208        Z" fill="#4dd1a0"></path>
209      <path d="M 46.91 54.39
210        C 50.72 56.87 54.90 57.18 58.63 54.41
211        A 1.00 1.00 0.0 0 1 59.41 54.23
212        C 62.47 54.80 62.54 57.43 60.15 58.94
213        Q 53.38 63.20 46.28 59.41
214        C 43.88 58.13 42.37 55.52 46.04 54.28
215        A 1.00 0.99 51.9 0 1 46.91 54.39
216        Z" fill="#000000"></path>
217      <path d="M 11.19 80.00
218        L 0.00 80.00
219        L 0.00 65.19
220        C 0.74 64.76 1.28 64.97 1.70 65.70
221        Q 5.99 73.11 11.57 78.67
222        Q 12.51 79.61 11.19 80.00
223        Z" fill="#43ce7c"></path>
224      </svg>
225    </div>
226    <div class="text">
227      <div class="text_m">CSS Gradient Button</div>
228      <div class="text_s">Praashoo7</div>
229    </div>
230  </div>
231  <div class="btns">
232    <div class="likes">
233      <svg viewBox="-2 0 105 92" class="likes_svg"><path d="M85.24 2.67C72.29-3.08 55.75 2.67 50 14.9 44.25 2 27-3.8 14.76 2.67 1.1 9.14-5.37 25 5.42 44.38 13.33 58 27 68.11 50 86.81 73.73 68.11 87.39 58 94.58 44.38c10.79-18.7 4.32-35.24-9.34-41.71Z"></path></svg><span class="likes_text">22</span>
234    </div>
235    <div class="comments">
236      <svg title="Comment" viewBox="-405.9 238 56.3 54.8" class="comments_svg"><path d="M-391 291.4c0 1.5 1.2 1.7 1.9 1.2 1.8-1.6 15.9-14.6 15.9-14.6h19.3c3.8 0 4.4-.8 4.4-4.5v-31.1c0-3.7-.8-4.5-4.4-4.5h-47.4c-3.6 0-4.4.9-4.4 4.5v31.1c0 3.7.7 4.4 4.4 4.4h10.4v13.5z"></path></svg><span class="comments_text">12</span>
237    </div>
238    <div class="views">
239      <svg title="Views" viewBox="0 0 30.5 16.5" class="views_svg"><path d="M15.3 0C8.9 0 3.3 3.3 0 8.3c3.3 5 8.9 8.3 15.3 8.3s12-3.3 15.3-8.3C27.3 3.3 21.7 0 15.3 0zm0 14.5c-3.4 0-6.2-2.8-6.2-6.2C9 4.8 11.8 2 15.3 2c3.4 0 6.2 2.8 6.2 6.2 0 3.5-2.8 6.3-6.2 6.3z"></path></svg><span class="views_text">332</span>
240    </div>
241  </div>
242</div>          

  1 
  2/* From Uiverse.io by Praashoo7 */
  3/* CodePen Card */
  4 
  5.card {
  6  width: 15em;
  7  height: 10em;
  8  background: linear-gradient(270deg, #ce68d9, #45c6db, #45db79);
  9  background-size: 800% 800%;
 10  -webkit-animation: AnimationName 3s ease infinite;
 11  -moz-animation: AnimationName 3s ease infinite;
 12  animation: AnimationName 3s ease infinite;
 13  transition: .4s ease-in-out;
 14  border-radius: 7px;
 15  cursor: pointer;
 16}
 17 
 18.fl {
 19  display: flex;
 20  justify-content: flex-end;
 21  opacity: 0;
 22  transition: .2s ease-in-out;
 23}
 24 
 25.fl:hover .fullscreen {
 26  scale: 1.2;
 27}
 28 
 29.fl:hover .fullscreen_svg {
 30  fill: white;
 31}
 32 
 33.fullscreen {
 34  width: 1.5em;
 35  height: 1.5em;
 36  border-radius: 5px;
 37  background-color: #727890;
 38  margin: 1em;
 39  margin-right: 0.5em;
 40  display: flex;
 41  align-items: center;
 42  justify-content: center;
 43  transition: .2s ease-in-out;
 44  box-shadow: 2px 2px 6px rgba(0,0,0,.4);
 45}
 46 
 47.fullscreen_svg {
 48  width: 15px;
 49  height: 15px;
 50  fill: rgb(177, 176, 176);
 51  transition: .2s ease-in-out;
 52}
 53 
 54.card_back {
 55  position: absolute;
 56  width: 15em;
 57  height: 13em;
 58  background-color: rgba(30, 31, 38, 0.575);
 59  border-radius: 7px;
 60  margin-top: -4.7em;
 61  margin-left: 0.7em;
 62  transition: .2s ease-in-out;
 63  z-index: -1;
 64}
 65 
 66.main:hover .card_back {
 67  margin-top: -5.9em;
 68  margin-left: 0em;
 69  scale: 1.1;
 70  height: 15.25em;
 71  cursor: pointer;
 72}
 73 
 74.main:hover .fl {
 75  opacity: 1;
 76  cursor: pointer;
 77  margin-right: 0.5em;
 78}
 79 
 80.data {
 81  display: flex;
 82  flex-direction: row;
 83  margin-top: 1em;
 84}
 85 
 86.img {
 87  width: 2.25em;
 88  height: 2.25em;
 89  background-color: #252525;
 90  border-radius: 5px;
 91  overflow: hidden;
 92}
 93 
 94.text {
 95  display: flex;
 96  justify-content: center;
 97  flex-direction: column;
 98  margin-left: 0.5em;
 99  font-family: Montserrat;
100  color: white;
101}
102 
103.text_m {
104  font-weight: bold;
105  font-size: 0.9em;
106}
107 
108.text_s {
109  font-size: 0.7em;
110}
111 
112.btns {
113  display: flex;
114  gap: 0.5em;
115  transition: .2s ease-in-out;
116}
117 
118.likes {
119  display: flex;
120  align-items: center;
121  justify-content: center;
122  width: 2.5em;
123  height: 1.4em;
124  border-radius: 4px;
125  margin-top: -0.5em;
126  opacity: 0;
127  background-color: #444857;
128  transition: .2s ease-in-out;
129}
130 
131.likes_text {
132  font-family: Montserrat;
133  font-size: 0.8em;
134  margin-left: 0.25em;
135  color: white;
136}
137 
138.likes_svg {
139  width: 12px;
140  height: 12px;
141  fill: white;
142}
143 
144.likes:hover {
145  background-color: #5A5F73;
146  cursor: pointer;
147}
148 
149.comments {
150  display: flex;
151  align-items: center;
152  justify-content: center;
153  width: 2.5em;
154  height: 1.4em;
155  border-radius: 4px;
156  margin-top: -0.5em;
157  opacity: 0;
158  background-color: #444857;
159  transition: .24s ease-in-out;
160}
161 
162.comments_text {
163  font-family: Montserrat;
164  font-size: 0.8em;
165  margin-left: 0.25em;
166  color: white;
167}
168 
169.comments_svg {
170  width: 12px;
171  height: 12px;
172  fill: white;
173}
174 
175.comments:hover {
176  background-color: #5A5F73;
177  cursor: pointer;
178}
179 
180.views {
181  display: flex;
182  align-items: center;
183  justify-content: center;
184  width: 3em;
185  height: 1.4em;
186  border-radius: 4px;
187  margin-top: -0.5em;
188  opacity: 0;
189  background-color: #444857;
190  transition: .28s ease-in-out;
191}
192 
193.views_text {
194  font-family: Montserrat;
195  font-size: 0.8em;
196  margin-left: 0.25em;
197  color: white;
198}
199 
200.views_svg {
201  width: 12px;
202  height: 12px;
203  fill: white;
204}
205 
206.views:hover {
207  background-color: #5A5F73;
208  cursor: pointer;
209}
210 
211.main:hover .likes {
212  margin-top: 0.5em;
213  opacity: 1;
214}
215 
216.main:hover .comments {
217  margin-top: 0.5em;
218  opacity: 1;
219}
220 
221.main:hover .views {
222  margin-top: 0.5em;
223  opacity: 1;
224}
225 
226 
227 
228/* The Main Switch */
229 
230.card_content {
231  display: flex;
232  align-items: center;
233  justify-content: center;
234}
235 
236button {
237  padding: 0.8em;
238  width: 14em;
239  border-radius: 10px;
240  font-family: Montserrat;
241  font-size: 0.8em;
242  align-self: center;
243  outline: none;
244  font-weight: bold;
245  border: 1px solid white;
246  background-color: transparent;
247  color: white;
248  transition: .4s ease-in-out;
249}
250 
251button::after {
252  content: "(Hold Me)";
253  opacity: 0;
254  position: absolute;
255}
256 
257button::before {
258  content: "∞";
259  font-size: 3.5em;
260  position: absolute;
261  opacity: 0;
262  left: 1.6em;
263  top: -0.36em;
264  transition: .4s ease-in-out;
265}
266 
267button:hover {
268  cursor: pointer;
269  color: black;
270  background: rgba(255, 255, 255, 0.2);
271  border-radius: 15px;
272  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
273  backdrop-filter: blur(5px);
274  -webkit-backdrop-filter: blur(5px);
275  border: 1px solid rgba(255, 255, 255, 0.3);
276}
277 
278button:hover::after {
279  position: relative;
280  opacity: 1;
281  font-size: 0.7em;
282}
283 
284@keyframes AnimationName {
285  0% {
286    background-position: 0% 50%
287  }
288 
289  50% {
290    background-position: 100% 50%
291  }
292 
293  100% {
294    background-position: 0% 50%
295  }
296}
297 
298button:active {
299  scale: 1.1;
300  opacity: 1;
301  color: transparent;
302  background: linear-gradient(90deg, #ce68d9, #45c6db, #45db79, #9f45b0, #e54ed0, #ffe4f2);
303  background-size: 800% 800%;
304  -webkit-animation: AnimationName 1s ease infinite;
305  -moz-animation: AnimationName 1s ease infinite;
306  animation: AnimationName 1s ease infinite;
307}
308 
309button:active::before {
310  color: white;
311  opacity: 1;
312}