CSS
デザイン

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というラベルを作成。

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