文字間ボタン

初心者でも実装しやすいボタンホバーアニメーション。
ボタンをホバーすると文字間（letter-spacing）が開くシンプルな動き。
フォームの送信ボタンなどにおススメ。

HTML

<a href="#" class="ugkBtnLsp">CONTCT</a>

CSS

.ugkBtnLsp {
  text-decoration: none;
  color: #fff;
  background-color: #767676;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  max-width: 100%;
  height: 60px;
  border-radius: 100px;
  transition: all ease .3s;
}
.ugkBtnLsp:hover {
  letter-spacing: 0.15em;
}

実際の動き

CONTCT

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

英字にスライドするボタン

この記事を書いた人

IYO

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