galaxy/Buttons/vinodjangid07_nervous-warthog-37.html

<button class="Projects-Button">
  <span class="IconContainer">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 259 259"
      class="svgBG"
    >
      <circle
        stroke-width="7"
        stroke="#fff"
        r="69"
        cy="129.5"
        cx="129.5"
      ></circle>
      <circle fill="#fff" r="18.5" cy="18.5" cx="129.5"></circle>
      <circle fill="#fff" r="18.5" cy="51.5" cx="206.5"></circle>
      <circle fill="#fff" r="18.5" cy="129.5" cx="240.5"></circle>
      <circle fill="#fff" r="18.5" cy="207.5" cx="207.5"></circle>
      <circle fill="#fff" r="18.5" cy="206.5" cx="52.5"></circle>
      <circle fill="#fff" r="18.5" cy="240.5" cx="129.5"></circle>
      <circle fill="#fff" r="18.5" cy="129.5" cx="18.5"></circle>
      <circle fill="#fff" r="18.5" cy="50.5" cx="51.5"></circle>
      <line
        stroke-width="8"
        stroke="#fff"
        y2="78.7279"
        x2="79.3848"
        y1="63.1716"
        x1="63.8284"
      ></line>
      <line
        stroke-width="8"
        stroke="#fff"
        y2="194.728"
        x2="195.385"
        y1="179.172"
        x1="179.828"
      ></line>
      <line
        stroke-width="8"
        stroke="#fff"
        y2="58"
        x2="130"
        y1="36"
        x1="130"
      ></line>
      <line
        stroke-width="8"
        stroke="#fff"
        y2="64.1715"
        x2="194.314"
        y1="78.3137"
        x1="180.172"
      ></line>
      <line
        stroke-width="8"
        stroke="#fff"
        y2="180.172"
        x2="78.3137"
        y1="194.314"
        x1="64.1716"
      ></line>
      <line
        stroke-width="8"
        stroke="#fff"
        y2="223"
        x2="130"
        y1="201"
        x1="130"
      ></line>
      <line
        stroke-width="8"
        stroke="#fff"
        y2="129"
        x2="223"
        y1="129"
        x1="201"
      ></line>
      <line
        stroke-width="8"
        stroke="#fff"
        y2="129"
        x2="58"
        y1="129"
        x1="36"
      ></line>
    </svg>

    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 110 110"
      class="svgFG"
    >
      <circle stroke-width="28" stroke="#fff" r="32" cy="55" cx="55"></circle>
      <path
        fill="#fff"
        d="M41 4C41 1.79086 42.7909 0 45 0H65C67.2091 0 69 1.79086 69 4V12H41V4Z"
      ></path>
      <path
        fill="#fff"
        d="M91.9838 16.9513C93.9123 15.8736 96.3492 16.5633 97.4269 18.4918L107.183 35.9507C108.261 37.8791 107.571 40.3161 105.643 41.3937L98.6592 45.2963L85.0002 20.8538L91.9838 16.9513Z"
      ></path>
      <path
        fill="#fff"
        d="M106.209 69.0964C108.106 70.2275 108.728 72.6828 107.596 74.5804L97.3555 91.7596C96.2243 93.6571 93.7691 94.2784 91.8715 93.1472L84.9998 89.0509L99.337 65L106.209 69.0964Z"
      ></path>
      <path
        fill="#fff"
        d="M69 106C69 108.209 67.2091 110 65 110L45 110C42.7909 110 41 108.209 41 106L41 98L69 98V106Z"
      ></path>
      <path
        fill="#fff"
        d="M17.4641 93.2485C15.5509 94.3531 13.1046 93.6976 12 91.7844L2 74.4639C0.89543 72.5508 1.55093 70.1044 3.4641 68.9998L10.3923 64.9998L24.3923 89.2485L17.4641 93.2485Z"
      ></path>
      <path
        fill="#fff"
        d="M3.4641 41.2485C1.55093 40.144 0.895431 37.6976 2 35.7844L12 18.4639C13.1046 16.5508 15.5509 15.8953 17.4641 16.9998L24.3923 20.9998L10.3923 45.2485L3.4641 41.2485Z"
      ></path>
    </svg>
  </span>

  <span class="text">Projects</span>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, purple, gradient, button, hover, svg, hover effect, projects */
.Projects-Button {
  width: fit-content;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 20px;
  gap: 10px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: linear-gradient(120deg, rgb(150, 86, 199), rgb(98, 47, 138));
  transition: all 0.3s;
  box-shadow: 0px 10px 10px rgba(144, 0, 255, 0.166);
}
.IconContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  position: relative;
}
.svgBG {
  width: 25px;
  height: auto;
}
.svgFG {
  width: 9px;
  height: auto;
  z-index: 2;
  position: absolute;
}
.text {
  color: rgb(240, 240, 240);
  font-weight: 500;
  font-size: 16px;
}
.Projects-Button:hover .svgFG {
  animation: clockwise 2s linear infinite;
}

.Projects-Button:hover .svgBG {
  animation: anti-clockwise 2s linear infinite;
}
@keyframes clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes anti-clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.Projects-Button:hover {
  background-color: rgb(119, 57, 166);
}

</style>