1<button class="button">
 2  <svg
 3    viewBox="0 0 24 24"
 4    fill="none"
 5    height="24"
 6    width="24"
 7    xmlns="http://www.w3.org/2000/svg"
 8    aria-hidden="true"
 9    class="w-6 h-6 text-gray-800 dark:text-white"
10  >
11    <path
12      clip-rule="evenodd"
13      d="M3 8a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V8Zm5-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H8Zm7.597 2.214a1 1 0 0 1 1-1h.01a1 1 0 1 1 0 2h-.01a1 1 0 0 1-1-1ZM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm-5 3a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"
14      fill-rule="evenodd"
15      fill="currentColor"
16    ></path>
17  </svg>
18</button>
19<button class="button">
20  <svg
21    viewBox="0 0 24 24"
22    fill="none"
23    height="24"
24    width="24"
25    xmlns="http://www.w3.org/2000/svg"
26    aria-hidden="true"
27    class="w-6 h-6 text-gray-800 dark:text-white"
28  >
29    <path
30      clip-rule="evenodd"
31      d="M12 4a8 8 0 0 0-6.895 12.06l.569.718-.697 2.359 2.32-.648.379.243A8 8 0 1 0 12 4ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10a9.96 9.96 0 0 1-5.016-1.347l-4.948 1.382 1.426-4.829-.006-.007-.033-.055A9.958 9.958 0 0 1 2 12Z"
32      fill-rule="evenodd"
33      fill="currentColor"
34    ></path>
35    <path
36      d="M16.735 13.492c-.038-.018-1.497-.736-1.756-.83a1.008 1.008 0 0 0-.34-.075c-.196 0-.362.098-.49.291-.146.217-.587.732-.723.886-.018.02-.042.045-.057.045-.013 0-.239-.093-.307-.123-1.564-.68-2.751-2.313-2.914-2.589-.023-.04-.024-.057-.024-.057.005-.021.058-.074.085-.101.08-.079.166-.182.249-.283l.117-.14c.121-.14.175-.25.237-.375l.033-.066a.68.68 0 0 0-.02-.64c-.034-.069-.65-1.555-.715-1.711-.158-.377-.366-.552-.655-.552-.027 0 0 0-.112.005-.137.005-.883.104-1.213.311-.35.22-.94.924-.94 2.16 0 1.112.705 2.162 1.008 2.561l.041.06c1.161 1.695 2.608 2.951 4.074 3.537 1.412.564 2.081.63 2.461.63.16 0 .288-.013.4-.024l.072-.007c.488-.043 1.56-.599 1.804-1.276.192-.534.243-1.117.115-1.329-.088-.144-.239-.216-.43-.308Z"
37      fill="currentColor"
38    ></path>
39  </svg>
40</button>
41 
42<button class="button">
43  <svg
44    viewBox="0 0 24 24"
45    fill="currentColor"
46    height="24"
47    width="24"
48    xmlns="http://www.w3.org/2000/svg"
49    aria-hidden="true"
50    class="w-6 h-6 text-gray-800 dark:text-white"
51  >
52    <path
53      clip-rule="evenodd"
54      d="M22 5.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.343 8.343 0 0 1-2.605.981A4.13 4.13 0 0 0 15.85 4a4.068 4.068 0 0 0-4.1 4.038c0 .31.035.618.105.919A11.705 11.705 0 0 1 3.4 4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 6.1 13.635a4.192 4.192 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 2 18.184 11.732 11.732 0 0 0 8.291 20 11.502 11.502 0 0 0 19.964 8.5c0-.177 0-.349-.012-.523A8.143 8.143 0 0 0 22 5.892Z"
55      fill-rule="evenodd"
56    ></path>
57  </svg>
58</button>
59 
60<button class="button">
61  <svg
62    viewBox="0 0 24 24"
63    fill="currentColor"
64    height="24"
65    width="24"
66    xmlns="http://www.w3.org/2000/svg"
67    aria-hidden="true"
68    class="w-6 h-6 text-gray-800 dark:text-white"
69  >
70    <path
71      clip-rule="evenodd"
72      d="M21.7 8.037a4.26 4.26 0 0 0-.789-1.964 2.84 2.84 0 0 0-1.984-.839c-2.767-.2-6.926-.2-6.926-.2s-4.157 0-6.928.2a2.836 2.836 0 0 0-1.983.839 4.225 4.225 0 0 0-.79 1.965 30.146 30.146 0 0 0-.2 3.206v1.5a30.12 30.12 0 0 0 .2 3.206c.094.712.364 1.39.784 1.972.604.536 1.38.837 2.187.848 1.583.151 6.731.2 6.731.2s4.161 0 6.928-.2a2.844 2.844 0 0 0 1.985-.84 4.27 4.27 0 0 0 .787-1.965 30.12 30.12 0 0 0 .2-3.206v-1.516a30.672 30.672 0 0 0-.202-3.206Zm-11.692 6.554v-5.62l5.4 2.819-5.4 2.801Z"
73      fill-rule="evenodd"
74    ></path>
75  </svg>
76</button>
77 
78<button class="button">
79  <svg
80    viewBox="0 0 24 24"
81    fill="currentColor"
82    height="24"
83    width="24"
84    xmlns="http://www.w3.org/2000/svg"
85    aria-hidden="true"
86    class="w-6 h-6 text-gray-800 dark:text-white"
87  >
88    <path
89      clip-rule="evenodd"
90      d="M12.006 2a9.847 9.847 0 0 0-6.484 2.44 10.32 10.32 0 0 0-3.393 6.17 10.48 10.48 0 0 0 1.317 6.955 10.045 10.045 0 0 0 5.4 4.418c.504.095.683-.223.683-.494 0-.245-.01-1.052-.014-1.908-2.78.62-3.366-1.21-3.366-1.21a2.711 2.711 0 0 0-1.11-1.5c-.907-.637.07-.621.07-.621.317.044.62.163.885.346.266.183.487.426.647.71.135.253.318.476.538.655a2.079 2.079 0 0 0 2.37.196c.045-.52.27-1.006.635-1.37-2.219-.259-4.554-1.138-4.554-5.07a4.022 4.022 0 0 1 1.031-2.75 3.77 3.77 0 0 1 .096-2.713s.839-.275 2.749 1.05a9.26 9.26 0 0 1 5.004 0c1.906-1.325 2.74-1.05 2.74-1.05.37.858.406 1.828.101 2.713a4.017 4.017 0 0 1 1.029 2.75c0 3.939-2.339 4.805-4.564 5.058a2.471 2.471 0 0 1 .679 1.897c0 1.372-.012 2.477-.012 2.814 0 .272.18.592.687.492a10.05 10.05 0 0 0 5.388-4.421 10.473 10.473 0 0 0 1.313-6.948 10.32 10.32 0 0 0-3.39-6.165A9.847 9.847 0 0 0 12.007 2Z"
91      fill-rule="evenodd"
92    ></path>
93  </svg>
94</button>          

 1.button {
 2  cursor: pointer;
 3  width: 50px;
 4  height: 50px;
 5  border-radius: 50px;
 6  border: none;
 7  background: linear-gradient(120deg, #833ab4, #fd1d1d, #fcb045);
 8  position: relative;
 9  z-index: 0;
10  display: flex;
11  align-items: center;
12  justify-content: center;
13  margin-left: 10px;
14  transition: 0.1s;
15}
16.button svg {
17  color: white;
18  width: 30px;
19  height: 30px;
20  z-index: 9;
21}
22 
23.button:nth-child(3) {
24  background: linear-gradient(120deg, #02ff2c, #008a12);
25}
26 
27.button:nth-child(4) {
28  background: rgb(69, 187, 255);
29}
30 
31.button:nth-child(5) {
32  background: rgb(255, 33, 33);
33}
34 
35.button:nth-child(6) {
36  background: black;
37}
38 
39.button:active {
40  transform: scale(0.85);
41}
42 
43.button::before {
44  content: "";
45  position: absolute;
46  width: 55px;
47  height: 55px;
48  background-color: #212121;
49  border-radius: 50px;
50  z-index: -1;
51  border: 0px solid rgba(255, 255, 255, 0.411);
52  transition: 0.4s;
53}
54 
55.button:hover::before {
56  width: 0px;
57  height: 0px;
58}