リンク – 002

プレビュー

別タブで表示する

コードの紹介

html

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

CSS

.cLinkButton_0005 {
  text-decoration: none;
  padding: 8px 24px;
  color: #000;
  letter-spacing: 0.05em;
  line-height: 24px;

  display: inline-block;

  background-image: linear-gradient(currentcolor, currentcolor);
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 0.5s cubic-bezier(0.21, 1.23, 1, 1) 0s;
}

.cLinkButton_0005:hover {
  background-position: 0 100%;
  background-size: 100% 2px;
}