CSSで早押しクイズのスイッチのようなボタンを作成する

実現したいこと

• 上図のようなかわいいボタンを作成したい。
• class=activeを付けるだけで、押した感じにしたい。
• 画像を使いたくない。

実装方法

<div class="switch">
    <a href="#"><span>＼ Check In ／</span></a>
</div>

/* 1. スイッチの台座にあたる部分 */
.switch {
  background-color: #f9ff6a;
  border-radius: 100%;
  height: 50px;
  margin: 0 auto;
  position: relative;
  width: 200px;
}
/* 2. スイッチ本体 */
.switch a {
  background-color: #dfe74e;
  display: block;
  height: 40px;
  margin: 0 auto;
  position: relative;
  top: -18px;
  width: 160px;
}
/* 押した時にボタンが押し込まれる */
.switch a.active {
  height: 20px;
  top: 2px;
}
/* ボタン本体を円柱に見せるために */
.switch a::before,
.switch a::after {
  border-radius: 100%;
  content: '';
  display: block;
  height: 40px;
  left: 0;
  position: absolute;
  width: 160px;
}
.switch a::before {
  background-color: #dfe74e;
  bottom: -20px;
}
.switch a::after {
  background-color: #f9ff6a;
  top: -20px;
}
/* 3. ラベル */
.switch a span {
  color: #fff;
  display: block;
  font-size: 14px;
  position: absolute;
  text-align: center;
  top: -40px;
  width: 100%;
}
.switch a.active span {
  display: none;
}

1. スイッチの台座にあたる部分を作成。
2. before, afterで円柱を作成し、スイッチ本体を作成。
3. Check Inというラベルを作成。

簡単なので、ぜひやってみてください。