矢印入替りボタン

ボタンをホバーすると矢印がするっと入れ替わるようなホバーアニメーション。
HTMLとCSSのコピペですぐ実装できる簡単なボタンアニメーションで、コーポレートサイトなどに使いやすいデザイン。

HTML

<a class="btnArrow1" href="#">
  READ MORE
  <span class="btnArrow1__icon">
    <span class="btnArrow1__arrow1">→</span>
    <span class="btnArrow1__arrow2">→</span>
  </span>
</a>

CSS

.btnArrow1 {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 1em;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.btnArrow1__icon {
  display: block;
  width: 1.8em;
  height: 1.8em;
  font-size: 0.9em;
  border: solid 1px #333;
  border-radius: 100px;
  position: relative;
  overflow: hidden;
  transition: all ease .3s;
}
.btnArrow1__arrow1, .btnArrow1__arrow2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all ease .3s;
}
.btnArrow1__arrow2 {
  color: #fff;
  left: -50%;
}
.btnArrow1:hover {
  color: #E59F46;
}
.btnArrow1:hover .btnArrow1__icon {
  background-color: #E59F46;
  border-color: #E59F46;
}
.btnArrow1:hover .btnArrow1__arrow1 {
  left: 150%;
}
.btnArrow1:hover .btnArrow1__arrow2 {
  left: 50%;
}

実際の動き

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

この記事を書いた人

IYO

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