リンクボタン – 003

プレビュー

別タブで表示する

コードの紹介

html

<a href="#" class="cLinkButton">1st code</a>

CSS

.cLinkButton {
  text-decoration: none;
  color: #000000;
  display: inline-block;
  padding: 8px 16px;
  border: 2px #000000 solid;
  position: relative;
  overflow: hidden;
}

.cLinkButton::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  content: "";
  background: #000;
  animation: slideXToRight 0.3s forwards ease-out;
}

.cLinkButton:hover {
  color: #fff;
}

.cLinkButton:hover::before {
  animation: slideXFromLeft 0.3s forwards ease-out;
}

@keyframes slideXFromLeft {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slideXToRight {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(101%);
  }
}