押したら変な汁が出そうな退会ボタン

# 元・幼虫博士、Webデザイナーに
弊社に「元・幼虫博士」のWebデザイナーが入社しました。

最近よく彼とペアプロをしています。

# 「可愛くてクリックできない退会ボタンを作りたい」
いつも通りペアプロをしていたとき、元・幼虫博士の彼は言いました。

> 「幼虫みたいに可愛い退会ボタンなら、ユーザーもクリックをためらうはず・・・」

どうやら彼は、退会ボタンを押しづらくしてユーザーの減少を阻止したいようです。

私と彼はペアプロを続けました。

そして20時間後、思いもよらないクソアプリが誕生しました。

# できたもの

<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="YzjKarW" data-user="Yametaro" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Yametaro/pen/YzjKarW">
  Untitled</a> by Yametaro (<a href="https://codepen.io/Yametaro">@Yametaro</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 確かに、クリックする気にはならない...

この退会ボタンなら、確かにユーザーはクリックをためらうかもしれません。

ただ「可愛くて押せない」とかではなく「押したらなんか**変な汁**が出てきそう」という理由だと思います。

# 作り方

※長いので折りたたんでいます。

<details><summary>HTML</summary><div>

```html
<div class="yochu-wrapper">
  <div class="yochu">
    <div class="part part1">
      <div class="button-wrapper"><button>退会する</button></div>
      <div class="part part2">
        <div class="button-wrapper"><button>退会する</button></div>
        <div class="part part3">
          <div class="button-wrapper"><button>退会する</button></div>
          <div class="part part4">
            <div class="button-wrapper"><button>退会する</button></div>
            <div class="part part5">
              <div class="button-wrapper"><button>退会する</button></div>
              <div class="part part6">
                <div class="button-wrapper"><button>退会する</button></div>
                <div class="part part7">
                  <div class="button-wrapper"><button>退会する</button></div>
                  <div class="part part8">
                    <div class="button-wrapper"><button>退会する</button></div>
                    <div class="part part9">
                      <div class="button-wrapper"><button>退会する</button></div>
                      <div class="part part10">
                        <div class="button-wrapper"><button>退会する</button></div>
                        <div class="part part11">
                          <div class="button-wrapper"><button>退会する</button></div>
                          <div class="part part12">
                            <div class="button-wrapper"><button>退会する</button></div>
                            <div class="part part13">
                              <div class="button-wrapper"><button>退会する</button></div>
                              <div class="part part14">
                                <div class="button-wrapper"><button>退会する</button></div>
                                <div class="part part15">
                                  <div class="button-wrapper"><button>退会する</button></div>
                                  <div class="part part16">
                                    <div class="button-wrapper"><button>退会する</button></div>
                                    <div class="part part17">
                                      <div class="button-wrapper"><button>退会する</button></div>
                                      <div class="part part18">
                                        <div class="button-wrapper"><button>退会する</button></div>
                                        <div class="part part19">
                                          <div class="button-wrapper"><button>退会する</button></div>
                                          <div class="part part20">
                                            <div class="button-wrapper"><button>退会する</button></div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

</div></details>


<details><summary>CSS</summary><div>

```css
html,
body {
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-image: linear-gradient(rgb(40, 51, 91), #000);
  background-position: left top;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  width: 192px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 100px;
  font-size: 32px;
  padding: 0.1em 1em;
  background-image: linear-gradient(#fff, #666);
  word-break: keep-all;
  position: absolute;
  top: 0;
}

.yochu-wrapper {
  width: 192px;
  height: 56px;
  position: relative;
  animation: move 10s linear 0s alternate infinite;
}

.yochu {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  animation: updown 1s linear 0s alternate infinite;
}

@keyframes move {
  from {
    left: -200px;
  }

  to {
    left: 200px;
  }
}

@keyframes updown {
  from {
    transform: rotate(30deg);
    top: 40px;
  }

  to {
    transform: rotate(-30deg);
    top: -40px;
  }
}

@keyframes part {
  from {
    transform: rotate(-3deg);
  }

  to {
    transform: rotate(3deg);
  }
}

.part {
  list-style-type: none;
  width: 13px;
  height: 100%;
  top: 0;
  position: absolute;
  left: 0;
  animation: part 1s linear 0s alternate infinite;
}

.part .part {
  left: 80%;
}

.button-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
}

.part1 button {
  left: 0;
}

.part2 button {
  left: -10px;
}

.part3 button {
  left: -20px;
}

.part4 button {
  left: -30px;
}

.part5 button {
  left: -40px;
}

.part6 button {
  left: -50px;
}

.part7 button {
  left: -60px;
}

.part8 button {
  left: -70px;
}

.part9 button {
  left: -80px;
}

.part10 button {
  left: -90px;
}

.part11 button {
  left: -100px;
}

.part12 button {
  left: -110px;
}

.part13 button {
  left: -120px;
}

.part14 button {
  left: -130px;
}

.part15 button {
  left: -140px;
}

.part16 button {
  left: -150px;
}

.part17 button {
  left: -160px;
}

.part18 button {
  left: -170px;
}

.part19 button {
  left: -180px;
}

.part20 button {
  left: -190px;
}

```
</div></details>

JavaScriptは使用しませんでした。

# まとめ

「`div`の中にまた`div`」という再帰的なHTML構造にしたため、恐ろしい[**波動拳コード**](https://qiita.com/suin/items/78de7c848b6d9c2f3eb3#%E3%81%A9%E3%82%93%E3%81%AA%E3%82%B3%E3%83%BC%E3%83%89%E3%81%8C%E3%81%8D%E3%82%8C%E3%81%84%E3%81%AA%E3%81%AE%E3%81%8B)が生まれてしまいました。

みなさんは真似しないでください。

〜おしまい〜

# おまけ

元・ドラマ脚本家のWebデザイナーもいます

https://twitter.com/ng_web_design/status/1603748890175766529?s=20&t=AgJijl26qn8w_z3m_7RoiQ