リンクボタン – 006

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<a href="#" class="cLinkButton_0006">
  <div class="cLinkButton_0006__arrowIcon"></div>
  1st code
</a>

.cLinkButton_0006 {
  text-decoration: none;
  color: #000;
  font-weight: 600;

  display: flex;
  align-items: center;
  column-gap: 12px;
}

.cLinkButton_0006__arrowIcon {
  --delay: 0.1s;
  --initialBgColor: #000;
  --initialFontColor: #fff;
  --changedBgColor: #f6f6f6;
  --changedFontColor: #000;

  width: 60px;
  height: 60px;
  overflow: hidden;
  position: relative;

  border-radius: 50%;

  background: var(--initialBgColor);
  transition: all 0.5s var(--delay);
}
.cLinkButton_0006__arrowIcon::before {
  content: "";
  background: var(--changedBgColor);
  inset: 0;
  border-radius: 50%;
  position: absolute;
  transform: scale(0);
  transition: all 0.3s var(--delay);
}
.cLinkButton_0006__arrowIcon::after {
  font-family: "Material Symbols Outlined";
  content: "\e941";
  font-size: 28px;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;

  color: var(--initialFontColor);
  transform: translate(-50%, -50%);
}
.cLinkButton_0006:hover .cLinkButton_0006__arrowIcon {
  background: var(--changedBgColor);
}
.cLinkButton_0006:hover .cLinkButton_0006__arrowIcon::before {
  transform: scale(1);
}
.cLinkButton_0006:hover .cLinkButton_0006__arrowIcon::after {
  animation: 600ms ease-in-out 0s 1 normal forwards running
    toRightThenToCenterFromLeft;
}

@keyframes toRightThenToCenterFromLeft {
  0% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(200%, -50%);
  }
  51% {
    visibility: hidden;
  }
  52% {
    visibility: hidden;
    color: var(--changedFontColor);
    transform: translate(-250%, -50%);
  }
  53% {
    visibility: visible;
  }
  100% {
    color: var(--changedFontColor);
    transform: translate(-50%, -50%);
  }
}