Admin12121's hover button

About Admin12121's hover button

Admin12121's hover button is an animated CSS button by Admin12121. Preview the interaction, customize its HTML, styles and JavaScript, or download the files with creator credit.

Effects and categories

Hover effects, Icon, 3D, Animated

Using this example

Copy the HTML or download index.html, style.css and app.js. Test keyboard focus, motion and contrast in your own project.

Usage, Tailwind and licensing questions

<div class="printer">
    <div class="paper">
        <svg viewBox="0 0 8 8" class="svg">
            <path fill="#0077FF" d="M6.28951 1.3867C6.91292 0.809799 7.00842 0 7.00842 0C7.00842 0 6.45246 0.602112 5.54326 0.602112C4.82505 0.602112 4.27655 0.596787 4.07703 0.595012L3.99644 0.594302C1.94904 0.594302 0.290039 2.25224 0.290039 4.29715C0.290039 6.34206 1.94975 8 3.99644 8C6.04312 8 7.70284 6.34206 7.70284 4.29715C7.70347 3.73662 7.57647 3.18331 7.33147 2.67916C7.08647 2.17502 6.7299 1.73327 6.2888 1.38741L6.28951 1.3867ZM3.99679 6.532C2.76133 6.532 1.75875 5.53084 1.75875 4.29609C1.75875 3.06133 2.76097 2.06018 3.99679 2.06018C4.06423 2.06014 4.13163 2.06311 4.1988 2.06905L4.2414 2.07367C4.25028 2.07438 4.26057 2.0758 4.27406 2.07651C4.81533 2.1436 5.31342 2.40616 5.67465 2.81479C6.03589 3.22342 6.23536 3.74997 6.23554 4.29538C6.23554 5.53084 5.23439 6.532 3.9975 6.532H3.99679Z"></path>
            <path fill="#0055BB" d="M6.756 1.82386C6.19293 2.09 5.58359 2.24445 4.96173 2.27864C4.74513 2.17453 4.51296 2.10653 4.27441 2.07734C4.4718 2.09225 5.16906 2.07947 5.90892 1.66374C6.04642 1.58672 6.1743 1.49364 6.28986 1.38647C6.45751 1.51849 6.61346 1.6647 6.756 1.8235V1.82386Z"></path>
        </svg>
    </div>
    <div class="dot"></div>
    <div class="output">
        <div class="paper-out"></div>
    </div>
</div>

.printer {
  --border: #00104b;
  --background: #fff;
  cursor: pointer;
  width: 32px;
  height: 18px;
  position: relative;
}

.printer:before, .printer:after {
  content: "";
  position: absolute;
  box-shadow: inset 0 0 0 2px var(--border);
  background: var(--background);
}

.printer:before {
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  border-radius: 3px;
  z-index: 2;
}

.printer:after {
  width: 26px;
  height: 6px;
  top: 0;
  left: 3px;
  border-radius: 3px 3px 0 0;
}

.printer .dot {
  width: 24px;
  height: 2px;
  border-radius: 1px;
  left: 4px;
  bottom: 4px;
  z-index: 4;
  position: absolute;
  background: var(--border);
}

.printer .dot:before, .printer .dot:after {
  content: "";
  position: absolute;
  background: var(--border);
  border-radius: 1px;
  height: 2px;
}

.printer .dot:before {
  width: 2px;
  right: 0;
  top: -5px;
}

.printer .dot:after {
  width: 4px;
  right: 3px;
  top: -5px;
}

.printer .paper {
  position: absolute;
  z-index: 1;
  width: 18px;
  height: 20px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px var(--border);
  background: var(--background);
  left: 7px;
  bottom: 10px;
  display: flex;
  justify-content: center;
  transform: perspective(40px) translateY(0) rotateX(4deg) translateZ(0);
  -webkit-animation: paper 1.2s ease infinite;
  animation: paper 1.2s ease infinite;
  -webkit-animation-play-state: var(--state, running);
  animation-play-state: var(--state, running);
}

.printer .paper .svg {
  display: block;
  width: 8px;
  height: 8px;
  margin-top: 4px;
}

.printer .output {
  width: 32px;
  height: 24px;
  pointer-events: none;
  top: 13px;
  left: 0;
  z-index: 3;
  overflow: hidden;
  position: absolute;
}

.printer .output .paper-out {
  position: absolute;
  z-index: 1;
  width: 18px;
  height: 20px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px var(--border);
  background: var(--background);
  left: 7px;
  bottom: 0;
  transform: perspective(40px) rotateX(40deg) translateY(-12px) translateZ(6px);
  -webkit-animation: paper-out 1.2s ease infinite;
  animation: paper-out 1.2s ease infinite;
  -webkit-animation-play-state: var(--state, running);
  animation-play-state: var(--state, running);
}

.printer .output .paper-out:before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  right: 3px;
  height: 2px;
  border-radius: 1px;
  opacity: 0.5;
  background: var(--border);
  box-shadow: 0 3px 0 var(--border), 0 6px 0 var(--border);
}

.printer:not(:hover) {
  --state: paused;
}

@-webkit-keyframes paper {
  50% {
    transform: translateY(10px) translateZ(0);
  }
}

@keyframes paper {
  50% {
    transform: translateY(10px) translateZ(0);
  }
}

@-webkit-keyframes paper-out {
  50% {
    transform: perspective(40px) rotateX(30deg) translateY(-4px) translateZ(6px);
  }
}

@keyframes paper-out {
  50% {
    transform: perspective(40px) rotateX(30deg) translateY(-4px) translateZ(6px);
  }
}