押すと死んじゃうボタン

# こんなボタンが欲しいと思ったことはありませんか？

みなさん、クリックすると「ティウンティウンティウン・・・」と死滅してしまう、そんなボタンが欲しいと思ったことはありませんか？

今回はそれを作ってみました。

# こんな感じ
https://twitter.com/Yametaro1983/status/1584503480160440322?s=20&t=xBMJs2RMMr0VCDprKXoQcw

# 作り方〜HTML編〜

HTMLはこれだけです。

```html:HTML
<button>申し込む</button>
<ul class="circles">
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
</ul>
```

ボタンとリストがあって、リストの要素は16個。
リストアイテムの中には1つずつ`div`が入っています。


# 作り方〜CSS編〜

### まずは`padding`、`margin`の初期化

ついでに`html`要素のはみ出しも無効化します。

```css:CSS
* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
  overflow: hidden;
}
```

### 背景とボタンのスタイリング

```css:CSS
/* 背景 */
body {
  background-image: linear-gradient(rgb(63, 63, 63), rgb(0, 0, 0));
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* ボタン */
button {
  cursor: pointer;
  border: none;
  border-radius: 100px;
  color: #fff;
  background-image: linear-gradient(rgb(56, 176, 209), rgb(0, 108, 138));
  font-size: 30px;
  width: 250px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.1s;
}

button:active {
  background-image: linear-gradient(rgb(0, 108, 138), rgb(56, 176, 209));
}
```

### ティウンティウンのパーツを作成

ここからが大変でした。

```css:CSS
.circles {
  display: none;
  height: 80px;
  width: 80px;
  pointer-events: none;
  position: relative;
}

.circles li {
  list-style-type: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.circles li div {
  list-style-type: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: 10s linear 0s 1 normal circle-wrapper;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circles li div::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 100%;
  border: 5px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: 0.4s linear 0s infinite normal circle-outer;
}

.circles li div::before {
  content: "";
  display: block;
  border-radius: 100%;
  background-color: #fff;
  animation: 0.4s linear 0s infinite normal circle-inner;
}

.circles li:nth-child(1),
.circles li:nth-child(9) {
  transform: rotate(45deg);
}

.circles li:nth-child(2),
.circles li:nth-child(10) {
  transform: rotate(90deg);
}

.circles li:nth-child(3),
.circles li:nth-child(11) {
  transform: rotate(135deg);
}

.circles li:nth-child(4),
.circles li:nth-child(12) {
  transform: rotate(180deg);
}

.circles li:nth-child(5),
.circles li:nth-child(13) {
  transform: rotate(-45deg);
}

.circles li:nth-child(6),
.circles li:nth-child(14) {
  transform: rotate(-90deg);
}

.circles li:nth-child(7),
.circles li:nth-child(15) {
  transform: rotate(-135deg);
}

.circles li:nth-child(9) div,
.circles li:nth-child(10) div,
.circles li:nth-child(11) div,
.circles li:nth-child(12) div,
.circles li:nth-child(13) div,
.circles li:nth-child(14) div,
.circles li:nth-child(15) div,
.circles li:nth-child(16) div {
  animation-duration: 20s;
}

@keyframes circle-wrapper {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: 2000px;
    top: 2000px;
  }  
}

@keyframes circle-outer {
  from {
    border-color: #fff;
  }
  to {
    border-color: transparent;
  }  
}

@keyframes circle-inner {
  from {
    height: 0;
    width: 0;
  }
  to {
    height: 80%;
    width: 80%;
  }  
}
```


# 作り方〜JavaScript編〜

JavaScriptは簡単でした。

```javascript:JavaScript
const btn = document.querySelector("button")
const circles = document.querySelector(".circles")
const circle = document.querySelector(".circles li div")

btn.addEventListener("click", (ev) => {
  ev.target.style.display = "none"
  circles.style.display = "block"
})

circle.addEventListener("animationend", () => {
  circles.style.display = "none"
  btn.style.display = "block"
})
```


# 完成品

<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="PoaoPYV" data-user="Yametaro" style="height: 300px; 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/PoaoPYV">
  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>

みなさんも、必要な時が来たら使ってみてください。