ダウンロード風ボタン

HTMLとCSSだけで実装できる初心者向けの簡単なボタンホバーアニメーション。
ボタンをホバーすると丸がスライドして動くアニメーション。
資料ダウンロードなどにおススメのボタン。

HTML

<a href="#" class="ugkBtnIslide">
  <span class="ugkBtnIslide__icon"></span>
  <span class="ugkBtnIslide__text">DOWNLOAD</span>
</a>

CSS

.ugkBtnIslide {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 260px;
  max-width: 100%;
  height: 60px;
  background-color: #252A24;
  color: #fff;
  border-radius: 100px;
  letter-spacing: 0.1em;
  transition: all ease .5s;
}
.ugkBtnIslide__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 100px;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 10px;
  margin: auto;
  transition: all ease .5s;
}
.ugkBtnIslide__icon:before {
  display: block;
  content: "";
  width: 40%;
  height: 40%;
  border-radius: 100px;
  background-color: #252A24;
  transition: all ease .5s;
}
.ugkBtnIslide:hover {
  background-color: #fff;
  color: #252A24;
}
.ugkBtnIslide:hover .ugkBtnIslide__icon {
  left: calc(100% - 50px);
}
.ugkBtnIslide:hover .ugkBtnIslide__icon:before {
  width: 20%;
  height: 20%;
}

実際の動き

DOWNLOAD

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

この記事を書いた人

IYO

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