JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<button class="btn-hamburger is-closed">
  <span>開閉</span>
</button>

<p class="text">あいうえお</p>

CSS

.btn-hamburger {
  width: 30px;
  height: 30px;
  background-color: #ddd;
  border: none;
  position: relative;
}
.btn-hamburger:focus {
  outline: none;
}
.btn-hamburger span {
  display: block;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  background-color: #000;
  height: 2px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: background .5s;
}

.btn-hamburger:before,
.btn-hamburger:after {
  content: '';
  background-color: #000;
  height: 2px;
  width: 100%;
  position: absolute;
  left: 0;
  transition: all .5s;
}

.btn-hamburger:before {
  top: 6px;
}
.btn-hamburger:after {
  top: 22px;
}

.btn-hamburger.is-closed span {
  background-color: transparent;
}
.btn-hamburger.is-closed:before,
.btn-hamburger.is-closed:after {
  top: 50%;
}
.btn-hamburger.is-closed:before {
  transform: rotate(45deg);
}
.btn-hamburger.is-closed:after {
  transform: rotate(-45deg);
}





.text {
  background-color: yellow;
  text-indent: 200%;
  overflow: hidden;
  white-space: nowrap;
}