Interactive Text Logo

02 January 2022
Interactive,
100DaysOfCode


/* Button container */
.container {
  width: 240px;
  height: 240px;
  transform: rotateX(40deg);
  transform-style: preserve-3d;
}

/* Light gray bottom part */
.base {
  background: #bbb;
  border-radius: 16px;
  box-shadow: 0 -6px 0px #777 inset;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  position: relative;
  transform-style: preserve-3d;
  width: 240px;
  height: 240px;
}

/* Clickable area containing both dark gray parts of button*/
.btn-wrapper {
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  transform-style: preserve-3d;
}
.btn-wrapper:active .btn {
  transform: translateZ(1px);
}
.btn-wrapper:active .btn-side {
  transform: translateZ(0);
}
.btn-wrapper:focus {
  outline: none;
}

/* Top of button */
.btn {
  background: #444 linear-gradient(#888, transparent 50%);
  border-radius: 16px;
  box-shadow: 0 0 5px #888 inset;
  color: #f80;
  display: block;
  font: 178.5px Asap;
  font-weight: bold;
  width: 210px;
  height: 210px;
  transform: translateZ(36px);
  transition: all 0.05s;
  text-align: center;
  text-shadow: 0 0 24px #f80, 0 -2.4px 0 #222, 0 2.4px 0 #fa2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Shown side of button */
.btn-side {
  background: #262626 linear-gradient(90deg, #666, transparent 8%, transparent 92%, #666);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 -4.8px 4.8px #222 inset;
  position: absolute;
  bottom: 0;
  transform: rotateX(-70deg);
  transform-origin: 0 100%;
  transition: all 0.05s;
  width: 210px;
  height: 31.5px;
  z-index: 1;
}

<div class='container'>
  <div class='base'>
    <div class='btn-wrapper' ontouchstart=''>
      <div class='btn-side'></div>
      <div class='btn'>
        M
      </div>
    </div>
  </div>
</div>

View on Instagram View on Flickr View on Twitter