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

元・幼虫博士、Webデザイナーに

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

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

「可愛くてクリックできない退会ボタンを作りたい」

いつも通りペアプロをしていたとき、元・幼虫博士の彼は言いました。

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

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

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

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

できたもの

See the Pen Untitled by Yametaro (@Yametaro) on CodePen.

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

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

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

作り方

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

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>

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

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

まとめ

「divの中にまたdiv」という再帰的なHTML構造にしたため、恐ろしい波動拳コードが生まれてしまいました。

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

〜おしまい〜

おまけ

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