실현하고 싶은 것

구현 방법

<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;
}