1 
 2<div class="container">
 3 <div class="left-side">
 4  <div class="card">
 5   <div class="card-line"></div>
 6   <div class="buttons"></div>
 7  </div>
 8  <div class="post">
 9   <div class="post-line"></div>
10   <div class="screen">
11    <div class="dollar">$</div>
12   </div>
13   <div class="numbers"></div>
14   <div class="numbers-line2"></div>
15  </div>
16 </div>
17 <div class="right-side">
18  <div class="new">New Transaction</div>
19   <svg viewBox="0 0 451.846 451.847" height="512" width="512" xmlns="http://www.w3.org/2000/svg" class="arrow"><path fill="#cfcfcf" data-old_color="#000000" class="active-path" data-original="#000000" d="M345.441 248.292L151.154 442.573c-12.359 12.365-32.397 12.365-44.75 0-12.354-12.354-12.354-32.391 0-44.744L278.318 225.92 106.409 54.017c-12.354-12.359-12.354-32.394 0-44.748 12.354-12.359 32.391-12.359 44.75 0l194.287 194.284c6.177 6.18 9.262 14.271 9.262 22.366 0 8.099-3.091 16.196-9.267 22.373z"></path></svg>
20 </div>
21</div>          

  1 
  2.container {
  3  background-color: #ffffff;
  4  display: flex;
  5  width: 460px;
  6  height: 120px;
  7  position: relative;
  8  border-radius: 6px;
  9  transition: 0.3s ease-in-out;
 10}
 11 
 12.container:hover {
 13  transform: scale(1.03);
 14  width: 220px;
 15}
 16 
 17.container:hover .left-side {
 18  width: 100%;
 19}
 20 
 21.left-side {
 22  background-color: #5de2a3;
 23  width: 130px;
 24  height: 120px;
 25  border-radius: 4px;
 26  position: relative;
 27  display: flex;
 28  justify-content: center;
 29  align-items: center;
 30  cursor: pointer;
 31  transition: 0.3s;
 32  flex-shrink: 0;
 33  overflow: hidden;
 34}
 35 
 36.right-side {
 37  width: calc(100% - 130px);
 38  display: flex;
 39  align-items: center;
 40  overflow: hidden;
 41  cursor: pointer;
 42  justify-content: space-between;
 43  white-space: nowrap;
 44  transition: 0.3s;
 45}
 46 
 47.right-side:hover {
 48  background-color: #f9f7f9;
 49}
 50 
 51.arrow {
 52  width: 20px;
 53  height: 20px;
 54  margin-right: 20px;
 55}
 56 
 57.new {
 58  font-size: 23px;
 59  font-family: "Lexend Deca", sans-serif;
 60  margin-left: 20px;
 61}
 62 
 63.card {
 64  width: 70px;
 65  height: 46px;
 66  background-color: #c7ffbc;
 67  border-radius: 6px;
 68  position: absolute;
 69  display: flex;
 70  z-index: 10;
 71  flex-direction: column;
 72  align-items: center;
 73  -webkit-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);
 74  -moz-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);
 75  -webkit-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);
 76}
 77 
 78.card-line {
 79  width: 65px;
 80  height: 13px;
 81  background-color: #80ea69;
 82  border-radius: 2px;
 83  margin-top: 7px;
 84}
 85 
 86@media only screen and (max-width: 480px) {
 87  .container {
 88    transform: scale(0.7);
 89  }
 90 
 91  .container:hover {
 92    transform: scale(0.74);
 93  }
 94 
 95  .new {
 96    font-size: 18px;
 97  }
 98}
 99 
100.buttons {
101  width: 8px;
102  height: 8px;
103  background-color: #379e1f;
104  box-shadow: 0 -10px 0 0 #26850e, 0 10px 0 0 #56be3e;
105  border-radius: 50%;
106  margin-top: 5px;
107  transform: rotate(90deg);
108  margin: 10px 0 0 -30px;
109}
110 
111.container:hover .card {
112  animation: slide-top 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) both;
113}
114 
115.container:hover .post {
116  animation: slide-post 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
117}
118 
119@keyframes slide-top {
120  0% {
121    -webkit-transform: translateY(0);
122    transform: translateY(0);
123  }
124 
125  50% {
126    -webkit-transform: translateY(-70px) rotate(90deg);
127    transform: translateY(-70px) rotate(90deg);
128  }
129 
130  60% {
131    -webkit-transform: translateY(-70px) rotate(90deg);
132    transform: translateY(-70px) rotate(90deg);
133  }
134 
135  100% {
136    -webkit-transform: translateY(-8px) rotate(90deg);
137    transform: translateY(-8px) rotate(90deg);
138  }
139}
140 
141.post {
142  width: 63px;
143  height: 75px;
144  background-color: #dddde0;
145  position: absolute;
146  z-index: 11;
147  bottom: 10px;
148  top: 120px;
149  border-radius: 6px;
150  overflow: hidden;
151}
152 
153.post-line {
154  width: 47px;
155  height: 9px;
156  background-color: #545354;
157  position: absolute;
158  border-radius: 0px 0px 3px 3px;
159  right: 8px;
160  top: 8px;
161}
162 
163.post-line:before {
164  content: "";
165  position: absolute;
166  width: 47px;
167  height: 9px;
168  background-color: #757375;
169  top: -8px;
170}
171 
172.screen {
173  width: 47px;
174  height: 23px;
175  background-color: #ffffff;
176  position: absolute;
177  top: 22px;
178  right: 8px;
179  border-radius: 3px;
180}
181 
182.numbers {
183  width: 12px;
184  height: 12px;
185  background-color: #838183;
186  box-shadow: 0 -18px 0 0 #838183, 0 18px 0 0 #838183;
187  border-radius: 2px;
188  position: absolute;
189  transform: rotate(90deg);
190  left: 25px;
191  top: 52px;
192}
193 
194.numbers-line2 {
195  width: 12px;
196  height: 12px;
197  background-color: #aaa9ab;
198  box-shadow: 0 -18px 0 0 #aaa9ab, 0 18px 0 0 #aaa9ab;
199  border-radius: 2px;
200  position: absolute;
201  transform: rotate(90deg);
202  left: 25px;
203  top: 68px;
204}
205 
206@keyframes slide-post {
207  50% {
208    -webkit-transform: translateY(0);
209    transform: translateY(0);
210  }
211 
212  100% {
213    -webkit-transform: translateY(-70px);
214    transform: translateY(-70px);
215  }
216}
217 
218.dollar {
219  position: absolute;
220  font-size: 16px;
221  font-family: "Lexend Deca", sans-serif;
222  width: 100%;
223  left: 0;
224  top: 0;
225  color: #4b953b;
226  text-align: center;
227}
228 
229.container:hover .dollar {
230  animation: fade-in-fwd 0.3s 1s backwards;
231}
232 
233@keyframes fade-in-fwd {
234  0% {
235    opacity: 0;
236    transform: translateY(-5px);
237  }
238 
239  100% {
240    opacity: 1;
241    transform: translateY(0);
242  }
243}