CSS

divでぐるぐる回転するボタンを作ってみた

まず完成形

完成形を見た方が早いので、まずは完成形。こんな感じのボタンを作成したかったのですが記事を探せど探せど見つからず自力で作成しました。

See the Pen
oNNomEY
by webnohito (@web-no-hito)
on CodePen.

コード

HTML

今回はdiv要素一つで作成しました。


<div></div>

CSS

次にCSSです。SCSS記法で記述しておりますので、必要に応じて変換等してください。


body {
  background: #474b42; // 画面の背景色
}
@keyframes spin { // spinという名前のアニメーションを作成
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

div {
  width: 140px; // widthとheightは揃えてください
  height: 140px;
  margin: auto;
  border-radius: 50%; // 要素を円にする
  border: 40px solid #f0f; //ぐるぐるしている部分
  border-color: transparent transparent transparent #c3d825; // 1辺のみ色を付ける
  animation: spin 1s linear infinite;  // 秒数で回転速度変更
  &:after { // after要素が中央の円になる
    content: "";
    display: block;
    border-radius: 50%;
    width: 140px;
    height: 140px;
    background: #69821b;
  }
}

コード内に軽く解説を書きましたが、ポイントはぐるぐるしている部分をどう実装するかだと思います。

div要素自体の背景色を指定しない(transparent)ことでボーダー部分にのみ色がつきます。そしてそのボーダーはtop/right/bottom/leftのどこか1辺にのみに色をつけることでこのような実装が可能です。

あともう1点はkeyframeでアニメーションを作成しておきましょう。これはよく見るアニメーションだと思いますが、要素を回転させるためのアニメーションです。

アニメーション補足

自分でまとめるよりも分かりやすく記事してくださっている方がいらっしゃいますのでこちらの記事をご参考いただけたらと思います。

related article

2020/03/19 CSS

IEのflex-direction: column;でハマったこと

2020/04/23 CSS

CSSだけでプルダウンメニューを実装する

2020/04/14 CSS

IEでlabelタグ内の画像がクリックしても反応しない

2020/02/13 CSS

スクロールバーを非表示にする(各ブラウザ対応)