search
LoginSignup
59
Organization

押すと死んじゃうボタン

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

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

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

こんな感じ

作り方〜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編〜

まずはpaddingmarginの初期化

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

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

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

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
.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
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"
})

完成品

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
59