Button by rahulgarg99

1.button1 {
2  line-height: 1;
3  text-decoration: none;
4  display: inline-flex;
5  align-items: center;
6  gap: 0.75rem;
7  background-color: #000;
8  color: #fff;
9  border-radius: 10rem;
10  font-weight: 600;
11  padding: 0.75rem 1.5rem;
12  padding-left: 20px;
13  white-space: nowrap;
14  overflow: hidden;
15  text-overflow: ellipsis;
16  transition: background-color 0.3s;
17}
18
19.button1__icon-wrapper {
20  flex-shrink: 0;
21  width: 25px;
22  height: 25px;
23  position: relative;
24  color: #000;
25  background-color: #fff;
26  border-radius: 50%;
27  display: grid;
28  place-items: center;
29  overflow: hidden;
30}
31
32.button1:hover {
33  background-color: #fff;
34  color: black;
35}
36
37.button1:hover .button1__icon-wrapper {
38  color: #fff;
39  background-color: #000;
40}
41
42.button1__icon-svg--copy {
43  position: absolute;
44  transform: translate(-150%, 150%);
45}
46
47.button1:hover .button1__icon-svg:first-child {
48  transition: transform 0.3s ease-in-out;
49  transform: translate(150%, -150%);
50}
51
52.button1:hover .button1__icon-svg--copy {
53  transition: transform 0.3s ease-in-out 0.1s;
54  transform: translate(0);
55}
56