グレイトフルCTA

ホバーすると線が伸びて矢印が回転するCTAボタンアニメーション。
最近ではPC表示でもハンバーガーメニューが増えてきたが、ハンバーガー内のメニューリンクにもおススメ。
初心者でもCSSホバーアニメーションのみなので、コピペで実装しやすい。

HTML

<a class="btnGrateful" href="#">View more</a>

CSS

.btnGrateful {
  display: inline-block;
  width: 200px;
  padding: 0.5em 0;
  position: relative;
  border-bottom: solid 1px #C7C7C7;
  text-decoration: none;
  color: #006CFF;
  letter-spacing: 0.1em;
}
.btnGrateful:before {
  display: block;
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 1px;
  width: 20%;
  background-color: #006CFF;
  z-index: 3;
  transition: all ease .6s;
}
.btnGrateful:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 0.5em;
  height: 0.5em;
  border-top: solid 1px #C7C7C7;
  border-right: solid 1px #C7C7C7;
  transform: rotate(45deg);
  transition: all ease 1s;
}
.btnGrateful:hover:before {
  width: 100%;
}
.btnGrateful:hover:after {
  transform: rotate(405deg);
  border-color: #006CFF;
}

実際の動き

みんなにもシェアしてあげて！

この記事を書いた人

IYO

WEBサイトで使える“動くUI”を、コピペで実装可能にし、どこでも誰でも使えるコードに特化して発信しているフロントエンドエンジニア。
中学生で初めてコードに出会い初めてコーディングを知る。
その後、WEB制作会社のフロントエンドエンジニアとしてキャリアをスタートし、フリーランスを経て、現在はWEB制作会社の代表取締役。
コーディングによって人生を創り上げてきたからこそ、コードを通して誰かの役に立てたらという想いで、これまでの知識と経験を総動員したコードを公開中。