Card by roroland

1.one-div {
2  --color1: #db41a5;
3  --color2: pink;
4  --color3: #fff;
5  --color4: #ffaae2;
6  --time: 5;
7  display: grid;
8  grid-template-columns: 1fr;
9  grid-template-rows: 1fr;
10  align-items: center;
11  justify-content: center;
12  padding: 1em;
13  width: auto;
14  height: 100%;
15  position: relative;
16  transition: all 1s ease-out;
17  transform: perspective(400px);
18  transform-style: preserve-3d;
19  z-index: 0;
20}
21
22.one-div:hover {
23  cursor: pointer;
24  filter: drop-shadow(0px 0px 100px var(--color2));
25  scale: 1.2;
26}
27
28.one-div:hover::after {
29  scale: 0;
30  opacity: 0;
31}
32
33.one-div:hover::before {
34  color: var(--color4);
35  box-shadow: 0px 0px 20px 5px rgba(0,0,0, .5), 0px 3px 50px rgba(0,0,0, .15), inset 0 0 1px 1px #000;
36  text-shadow: 0 1px 5px #000;
37}
38
39.one-div:active {
40  transition: all .1s ease-out;
41  scale: .99;
42}
43
44.one-div:active::before {
45  transition: all .1s ease-out;
46  color: white;
47}
48
49.one-div::after,
50.one-div::before {
51  padding: 1em;
52  grid-column: 1/-1;
53  grid-row: 1 / 1;
54  position: relative;
55  transition: all 1s ease-out .3s;
56}
57
58.one-div::before {
59  animation: fade calc(var(--time) * 1s) ease-out infinite calc(var(--time) * .5s);
60  content: 'Single div button';
61  border-radius: 4px;
62  background-image: linear-gradient(to bottom, var(--color1) 30%, var(--color2) 95%, var(--color3) 99%);
63}
64
65.one-div::after {
66  animation: rotate calc(var(--time) * 1s) ease-out infinite;
67  display: block;
68  width: calc(100% - 2rem);
69  outline-color: var(--color4);
70  outline-width: .5em;
71  outline-offset: .9em;
72  outline-style: solid;
73  content: '';
74  z-index: -1;
75}
76
77@keyframes rotate {
78  0% {
79    rotate: x -90deg;
80  }
81
82  0%, 50% {
83    filter: blur(0px) drop-shadow(0px 0px 60px var(--color3)) opacity(100%);
84  }
85
86  100% {
87    rotate: x 90deg;
88    filter: blur(4px) drop-shadow(0px 0px 30px var(--color2)) opacity(80%);
89  }
90}
91
92@keyframes fade {
93  0%, 100% {
94    opacity: 1;
95  }
96
97  50% {
98    opacity: 0.9;
99  }
100}