Button by satyamchaudharydev

1/* inspired from this svgbackgrounds.com/ */
2.button {
3  width: fit-content;
4  display: flex;
5  padding: 0.8em 1.1em;
6  gap: 0.4rem;
7  border: none;
8  font-weight: bold;
9  border-radius: 30px;
10  cursor: pointer;
11  text-shadow: 2px 2px 3px rgb(136 0 136 / 50%);
12  background: linear-gradient(
13      15deg,
14      #880088,
15      #aa2068,
16      #cc3f47,
17      #de6f3d,
18      #f09f33,
19      #de6f3d,
20      #cc3f47,
21      #aa2068,
22      #880088
23    )
24    no-repeat;
25  background-size: 300%;
26  background-position: left center;
27  transition: background 0.3s ease;
28  color: #fff;
29}
30
31.button:hover {
32  background-size: 320%;
33  background-position: right center;
34}
35
36.button:hover svg {
37  fill: #fff;
38}
39
40.button svg {
41  width: 23px;
42  fill: #f09f33;
43  transition: 0.3s ease;
44}
45