Button by Yaya12085

1button {
2  max-width: 320px;
3  display: flex;
4  overflow: hidden;
5  position: relative;
6  padding: 0.875rem 72px 0.875rem 1.75rem;
7  background-color: #039be5;
8  background-image: linear-gradient(to top right, #039be5,#29b6f6);
9  color: #ffffff;
10  font-size: 15px;
11  line-height: 1.25rem;
12  font-weight: 700;
13  text-align: center;
14  text-transform: uppercase;
15  vertical-align: middle;
16  align-items: center;
17  border-radius: 0.5rem;
18  gap: 0.75rem;
19  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
20  border: none;
21  transition: all .6s  ease;
22}
23
24button span {
25  background-color: rgb(3 155 229);
26  display: grid;
27  position: absolute;
28  right: 0;
29  place-items: center;
30  width: 3rem;
31  height: 100%;
32}
33
34button span svg {
35  width: 1.5rem;
36  height: 1.5rem;
37}
38
39button:hover {
40  box-shadow: 0 4px 30px  rgba(4, 175, 255, .1), 0 2px 30px rgba(11, 158, 255, 0.06);
41}