Button by Lakshay-art

1.button {
2  cursor: pointer;
3  border: none;
4  /* margin: 0px !important; */
5  background: transparent;
6  transition: scale 1s;
7}
8.button:hover {
9  scale: 1.05;
10}
11#main-border {
12  border-radius: 22px;
13  padding: 1px;
14  background: linear-gradient(180deg, #e8e8e8, #d2d2d2);
15  box-shadow: 0px 20px 25px #0002, 0px 3px 4px #0004;
16}
17#main {
18  /* border: 2px solid #e4e4e4; */
19  border-radius: 21px;
20  width: 260px;
21  height: 90px;
22  background: linear-gradient(180deg, #1111, #0007);
23  padding: 4px;
24
25  /* overflow: hidden; */
26}
27#inner-box {
28  width: 100%;
29  height: 100%;
30  background: linear-gradient(180deg, #fff, #eaeaea);
31  border-radius: 16px;
32  box-shadow: 0px 2px 3px #0008;
33  padding-block: 6px;
34  padding-inline: 6px;
35  position: relative;
36}
37#inner-dent {
38  border-radius: 35px;
39  width: 100%;
40  height: 100%;
41  background: linear-gradient(180deg, #eaeaea 0%, #fff 70%);
42  filter: blur(1.5px);
43}
44#text-container {
45  position: absolute;
46  top: 0px;
47  left: 0px;
48  justify-content: center;
49  align-items: center;
50  width: 100%;
51  height: 100%;
52  display: flex;
53  gap: 75px;
54  /* background-color: red; */
55}
56#text {
57  font-size: 24px;
58  font-weight: 600;
59}
60#text-container:focus > #arrow {
61  transform: rotate(-45deg) translateX(110px) translateY(90px);
62  /* transform: rotate(45deg) translateX(100px) translateY(-90px); */
63  transition: transform 1s;
64}
65#send {
66  font-size: 24px;
67  font-weight: 600;
68  position: absolute;
69  top: 0px;
70  left: 57px;
71  /* justify-content: center; */
72  align-items: center;
73  width: 100%;
74  height: 100%;
75  display: flex;
76}
77#text-container:focus {
78  transform: translateY(-450px);
79  transition: transform 1.5s 1s ease-in;
80  /* background-color: red; */
81}
82#inner-box:focus-within > #send {
83  opacity: 0;
84  transition: opacity 1s 1s;
85}
86#sent {
87  font-size: 24px;
88  font-weight: 600;
89  position: absolute;
90  top: 0px;
91  left: 57px;
92  /* justify-content: center; */
93  align-items: center;
94  width: 100%;
95  height: 100%;
96  display: flex;
97  opacity: 0;
98}
99
100#inner-box:focus-within > #sent {
101  opacity: 1;
102  transform: translateX(20px);
103  transition: opacity 1s 1s, transform 1s 1s;
104}
105
106#tick {
107  position: absolute;
108  top: 0px;
109  right: 0px;
110  /* justify-content: center; */
111  align-items: center;
112  /* width: 100%; */
113  height: 100%;
114  display: flex;
115  opacity: 0;
116}
117#inner-box:focus-within > #tick {
118  opacity: 1;
119  transform: translateX(-85px);
120  transition: opacity 1s 1.3s, transform 1s 1s;
121}
122.button:focus-within {
123  animation: recoil 0.4s 0.9s;
124  /* transform: translateY(10px);
125  transition: transform 1s 0.8s; */
126}
127
128@keyframes recoil {
129  0% {
130    transform: translateY(0px);
131  }
132  50% {
133    transform: translateY(10px);
134  }
135  100% {
136    transform: translateY(0px);
137  }
138}
139#planebody {
140  position: absolute;
141  top: 22px;
142  right: 62px;
143  /* justify-content: center; */
144  align-items: center;
145  /* width: 100%; */
146  height: 100%;
147  display: flex;
148  opacity: 0;
149}
150#text-container:focus-within > #planebody {
151  opacity: 1;
152  /* transform: translateX(20px); */
153  transition: opacity 1s 0.5s;
154}
155