Button with animated Dracula hover effect

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap" rel="stylesheet" /><link rel="stylesheet" href="./style.css">

</head>
<body>
  <div class="container">
  <div class="mainBox">
    <a class="button" href="#">
      <span class="text">Trick or Treat</span>
      <div class="button__material_A material--1"></div>
      <div class="button__material_A material--2"></div>
      <div class="button__material_B material--3"></div>
      <div class="button__material_B material--4"></div>
    </a>
    <div class="controlPanel__panel panel--1"></div>
    <div class="controlPanel__panel panel--2"></div>
    <div class="controlPanel__panel panel--3"></div>
    <div class="controlPanel__panel panel--4"></div>
    <div class="controlPanel__panel panel--5"></div>
    <div class="controlPanel__panel panel--6"></div>
    <div class="controlPanel__panel panel--7"></div>
    <div class="controlPanel__panel panel--8"></div>
    <div class="controlPanel__panel panel--9"></div>
    <div class="frame">
      <div class="frame__inner">
        <div class="bat">
          <div class="bat__body">
            <div class="bat__wing wing--L"></div>
            <div class="bat__wing wing--R"></div>
          </div>
        </div>
      </div>
      <div class="frame__material frame__material_1"></div>
      <div class="frame__material frame__material_2"></div>
      <div class="frame__material frame__material_3"></div>
      <div class="frame__material frame__material_4"></div>
      <div class="frame__material frame__material_5"></div>
    </div>
    <div class="dracula">
      <div class="dracula__head">
        <div class="dracula__head__wrapper">
          <div class="dracula__hair">
            <div class="dracula__hair__left"></div>
            <div class="dracula__hair__right"></div>
            <div class="dracula__hair__center"></div>
          </div>
          <div class="dracula__face">
            <div class="dracula__face__top">
              <div class="dracula__face__eye dracula__eye--L">
                <div class="dracula__face__eye__inner"></div>
              </div>
              <div class="dracula__face__eye dracula__eye--R">
                <div class="dracula__face__eye__inner"></div>
              </div>
            </div>
            <div class="dracula__face__bottom"></div>
            <div class="dracula__face__fang fang--T"></div>
            <div class="dracula__face__fang fang--B"></div>
          </div>
        </div>
      </div>
      <div class="dracula__body">
        <div class="dracula__body__collar"></div>
        <div class="dracula__body__wrapper">
          <div class="dracula__body__inner">
            <div class="dracula__body__best"></div>
            <div class="dracula__body__tie"></div>
          </div>
        </div>
        <div class="dracula__body__box">
          <div class="dracula__body__arm arm--L"></div>
          <div class="dracula__body__arm arm--R"></div>
          <div class="wineGrass">
            <div class="wineGrass__cup">
              <div class="wineGrass__wine"></div>
            </div>
            <div class="wineGrass__parts"></div>
          </div>
          <div class="dracula__body__hand hand--R"></div>
        </div>
      </div>
    </div>
    <div class="reflection"></div>
  </div>
</div>  
</body>
</html>

CSS

body {
    margin: 0;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: #233952;
}
:root {
    --skin_A: #fff6e0;
    --skin_B: #bde3ff;
    --body: #001b30;
    --button: #907400;
    --material: #693a0c;
}
/* ----------------
    mainBox
------------------*/
.mainBox {
    position: relative;
    width: 240px;
    height: 420px;
}
/* ----------------
    frame
------------------*/
.frame {
    position: absolute;
    z-index: 1;
    width: 240px;
    height: 300px;
    background: #42221b;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}
.frame__inner {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    background: #3b7a99;
    transition: all ease 0.8s;
    overflow: hidden;
}
.frame__inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0) inset;
    transition: all ease 0.4s;
}
.frame__material {
    position: absolute;
    z-index: 1;
    width: 0;
    height: 0;
}
.frame__material::before,
.frame__material::after {
    content: "";
    position: absolute;
}
.frame__material_1 {
    top: -16px;
    left: 40px;
    border-top: solid 80px var(--material);
    border-left: solid 30px transparent;
    border-right: solid 20px transparent;
    border-bottom: solid 0 transparent;
}
.frame__material_1::before {
    top: -120px;
    left: 60px;
    border-top: solid 0 transparent;
    border-left: solid 40px transparent;
    border-right: solid 20px transparent;
    border-bottom: solid 80px var(--material);
}
.frame__material_1::after {
    top: -20px;
    left: 100px;
    border-top: solid 20px transparent;
    border-left: solid 0 transparent;
    border-right: solid 90px var(--material);
    border-bottom: solid 50px transparent;
}
.frame__material_2 {
    top: 140px;
    right: -30px;
    border-top: solid 40px transparent;
    border-left: solid 0 transparent;
    border-right: solid 100px var(--material);
    border-bottom: solid 60px transparent;
}
.frame__material_2::before {
    top: 70px;
    left: -10px;
    border-top: solid 20px transparent;
    border-left: solid 0 transparent;
    border-right: solid 90px var(--material);
    border-bottom: solid 50px transparent;
    transform: rotate(45deg);
}
.frame__material_2::after {
    top: 50px;
    left: -100px;
    border-top: solid 0 transparent;
    border-left: solid 40px transparent;
    border-right: solid 60px transparent;
    border-bottom: solid 120px var(--material);
}
.frame__material_3 {
    top: 254px;
    right: 208px;
    border-top: solid 40px transparent;
    border-left: solid 0 transparent;
    border-right: solid 100px var(--material);
    border-bottom: solid 60px transparent;
}
.frame__material_3::before {
    top: -140px;
    left: 15px;
    border-top: solid 20px transparent;
    border-left: solid 0 transparent;
    border-right: solid 90px var(--material);
    border-bottom: solid 50px transparent;
    transform: rotate(346deg);
}
.frame__material_3::after {
    top: -285px;
    left: 20px;
    border-top: solid 0 transparent;
    border-left: solid 40px transparent;
    border-right: solid 60px transparent;
    border-bottom: solid 120px var(--material);
    transform: rotate(120deg);
}
/* ----------------
    button
------------------*/
.button {
    position: absolute;
    z-index: 60;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: bold;
    font-family: "MedievalSharp", cursive;
    width: 100%;
    height: 64px;
    text-decoration: none;
    color: #fff;
    background: var(--button);
}
.text {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    display: flex;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    background: #7d6500;
    transition: all ease 0.4s;
}
.button__material_A {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-left: solid 48px transparent;
    border-right: solid 48px transparent;
}
.material--1 {
    top: -10px;
    border-top: solid 0 transparent;
    border-bottom: solid 12px var(--button);
}
.material--2 {
    bottom: -10px;
    border-top: solid 12px var(--button);
    border-bottom: solid 0 transparent;
}
.button__material_A::before,
.button__material_A::after {
    content: "";
    position: absolute;
    border-left: solid 24px transparent;
    border-right: solid 24px transparent;
}
.button__material_A::before {
    left: -96px;
}
.button__material_A::after {
    right: -96px;
}
.material--1::after,
.material--1::before {
    top: 4px;
    border-top: solid 0 transparent;
    border-bottom: solid 8px var(--button);
}
.material--2::after,
.material--2::before {
    bottom: 4px;
    border-top: solid 8px var(--button);
    border-bottom: solid 0 transparent;
}
.button__material_B {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 0;
    height: 0;
    border-top: solid 24px transparent;
    border-bottom: solid 24px transparent;
}
.material--3 {
    left: -10px;
    border-left: solid 0 transparent;
    border-right: solid 12px var(--button);
}
.material--4 {
    right: -10px;
    border-right: solid 0 transparent;
    border-left: solid 12px var(--button);
}
.button__material_B::before,
.button__material_B::after {
    content: "";
    position: absolute;
    border-left: solid 12px transparent;
    border-right: solid 12px transparent;
}
.material--3::before,
.material--3::after {
    left: 4px;
}
.material--4::before,
.material--4::after {
    right: 4px;
}
.material--3::before {
    top: -36px;
    border-top: solid 24px var(--button);
    border-bottom: solid 0 transparent;
    transform: rotate(-45deg);
}
.material--3::after {
    bottom: -36px;
    border-bottom: solid 24px var(--button);
    border-top: solid 0 transparent;
    transform: rotate(45deg);
}
.material--4::before {
    top: -36px;
    border-top: solid 24px var(--button);
    border-bottom: solid 0 transparent;
    transform: rotate(45deg);
}
.material--4::after {
    bottom: -36px;
    border-bottom: solid 24px var(--button);
    border-top: solid 0 transparent;
    transform: rotate(-45deg);
}
/* ----------------
    bat
------------------*/
.bat {
    position: absolute;
    top: 42px;
    right: -80px;
    width: 24px;
    height: 24px;
    perspective: 400px;
    transition: all ease 0.8s;
    animation: bat_move_1 5s ease infinite;
}
.bat__body {
    position: absolute;
    top: 0;
    left: -16px;
    width: 24px;
    height: 32px;
    border-radius: 2px 2px 8px 8px;
    transform: rotateX(30deg);
    transform-origin: center bottom;
    background: #000;
    animation: bat_move_2 3s ease infinite;
}
.bat__body::before,
.bat__body::after {
    content: "";
    position: absolute;
    top: -8px;
    width: 0;
    height: 0;
    border-top: solid 12px transparent;
    border-bottom: solid 8px transparent;
}
.bat__body::before {
    left: 0;
    border-left: solid 12px #000;
    border-right: solid 0 transparent;
}
.bat__body::after {
    right: 0;
    border-left: solid 0 transparent;
    border-right: solid 12px #000;
}
.bat__wing {
    position: absolute;
    top: 8px;
    width: 0;
    height: 0;
    border-top: solid 16px #000;
    border-left: solid 8px transparent;
    border-right: solid 12px transparent;
    border-bottom: solid 0 transparent;
}
.wing--L {
    right: -12px;
    animation: wing_L linear 0.13s infinite alternate;
    transform-origin: top left;
}
.wing--R {
    left: -12px;
    animation: wing_R linear 0.13s infinite alternate;
    transform-origin: top right;
}
.bat__wing::before,
.bat__wing::after {
    content: "";
    position: absolute;
}
.bat__wing::before {
    top: -16px;
    border-top: solid 16px #000;
    border-left: solid 8px transparent;
    border-right: solid 8px transparent;
    border-bottom: solid 0 transparent;
}
.wing--L::before {
    right: -18px;
    transform: rotate(-12deg);
}
.wing--R::before {
    left: -18px;
    transform: rotate(12deg);
}

.bat__wing::after {
    top: -18px;
    border-top: solid 22px #000;
    border-bottom: solid 0 transparent;
}
.wing--L::after {
    right: -28px;
    border-left: solid 16px transparent;
    border-right: solid 4px transparent;
    transform: rotate(-24deg);
}
.wing--R::after {
    left: -28px;
    border-right: solid 16px transparent;
    border-left: solid 4px transparent;
    transform: rotate(24deg);
}
/* ----------------
    controlPanel__panel
------------------*/
.controlPanel__panel {
    position: absolute;
    z-index: 50;
    width: 130px;
    height: 170px;
}
.panel--1 {
    top: -50px;
    left: -75px;
}
.panel--2 {
    top: -50px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.panel--3 {
    top: -50px;
    right: -75px;
}
.panel--4 {
    top: 120px;
    left: -75px;
}
.panel--5 {
    top: 120px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.panel--6 {
    top: 120px;
    right: -75px;
}
.panel--7 {
    top: 290px;
    left: -75px;
}
.panel--8 {
    top: 290px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.panel--9 {
    top: 290px;
    right: -75px;
}
/* ----------------
    dracula main
------------------*/
.dracula {
    position: absolute;
    z-index: 10;
    width: 100%;
}
/* ----------------
    head
------------------*/
.dracula__head {
    position: absolute;
    z-index: 10;
    top: 90px;
    left: 60px;
    width: 120px;
    height: 112px;
    transition: all ease 0.8s;
}
.dracula__head__wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
}
/* ----------------
    face
------------------*/
.dracula__face {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    perspective: 400px;
    width: 100%;
    height: 100%;
}
.dracula__face::before {
    content: "";
    position: absolute;
    z-index: 12;
    bottom: 14px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 32px;
    height: 3px;
    border-radius: 2px;
    background: #000;
    transition: all ease 0.2s;
}
.dracula__face::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 4px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 60px;
    height: 88px;
    transform-origin: bottom center;
    transform: rotateX(-40deg);
    background: #710032;
    transition: all ease 0.8s;
}
.dracula__face__top {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 80px;
    height: 100px;
    border-radius: 0 0 8px 8px;
    transform-origin: top center;
    transform: rotateX(20deg);
    background: var(--skin_A);
    transition: all ease 0.6s;
}
.dracula__face__top::before {
    content: "";
    position: absolute;
    top: 48px;
    left: -28px;
    width: 0;
    height: 0;
    border-top: solid 0 transparent;
    border-left: solid 22px transparent;
    border-right: solid 22px transparent;
    border-bottom: solid 18px var(--skin_A);
    transform: rotate(45deg);
    transition: inherit;
}
.dracula__face__top::after {
    content: "";
    position: absolute;
    top: 48px;
    right: -28px;
    width: 0;
    height: 0;
    border-top: solid 0 transparent;
    border-left: solid 22px transparent;
    border-right: solid 22px transparent;
    border-bottom: solid 18px var(--skin_A);
    transform: rotate(-45deg);
    transition: inherit;
}
.dracula__face__bottom {
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 68px;
    height: 40px;
    border-radius: 0 0 12px 12px;
    transform-origin: bottom center;
    transform: rotateX(-60deg);
    background: var(--skin_A);
    transition: all ease 0.6s;
}
.dracula__face__eye {
    position: absolute;
    top: 52px;
    width: 28px;
    height: 28px;
    background: #e0d8c5;
    border-radius: 50%;
    transition: all ease 0.6s;
}
.dracula__eye--L {
    left: 7px;
}
.dracula__eye--R {
    right: 7px;
}
.dracula__face__eye::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: -10px;
    width: 24px;
    height: 6px;
    background: #000;
}
.dracula__eye--L::before {
    right: 4px;
    transform: skew(30deg) rotate(7deg);
    transition: inherit;
}
.dracula__eye--R::before {
    left: 4px;
    transform: skew(-30deg) rotate(-7deg);
    transition: inherit;
}
.dracula__face__eye::after {
    content: "";
    position: absolute;
    z-index: 2;
    bottom: -4px;
    width: 28px;
    height: 0;
    border-radius: 50%;
    background: var(--skin_A);
    transition: inherit;
}
.dracula__eye--L::after {
    right: 0;
}
.dracula__eye--R::after {
    left: 0;
}
.dracula__face__eye__inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 26px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
    transition: all ease 0.6s;
}
.dracula__face__eye__inner::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #000;
    transition: inherit;
    transition: all ease 0.3s;
}

/* ----------------
    fang
------------------*/
.dracula__face__fang {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 60px;
    height: 16px;
    transition: all ease 0.8s;
    overflow: hidden;
}
.fang--T {
    top: 94px;
    transform-origin: center top;
}
.fang--B {
    bottom: 14px;
    transform-origin: center bottom;
}
.dracula__face__fang::before,
.dracula__face__fang::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: solid 6px transparent;
    border-right: solid 6px transparent;
    transition: all ease 0.6s;
}
.fang--T::before,
.fang--T::after {
    top: -16px;
    border-top: solid 14px #fff;
    border-bottom: solid 0 transparent;
}
.fang--T::before {
    left: 0;
}
.fang--T::after {
    right: 0;
}
.fang--B::before,
.fang--B::after {
    bottom: -14px;
    border-top: solid 0 transparent;
    border-bottom: solid 12px #fff;
}
.fang--B::before {
    left: 4px;
}
.fang--B::after {
    right: 4px;
}
/* ----------------
    hair
------------------*/
.dracula__hair__left {
    position: absolute;
    z-index: 22;
    top: 16px;
    left: -26px;
    width: 0;
    height: 0;
    border-top: solid 0 transparent;
    border-left: solid 22px transparent;
    border-right: solid 64px transparent;
    border-bottom: solid 24px #000;
    transform: rotate(72deg);
}
.dracula__hair__left::before {
    content: "";
    position: absolute;
    top: -15px;
    left: -30px;
    width: 0;
    height: 0;
    border-top: solid 24px #000;
    border-left: solid 22px transparent;
    border-right: solid 44px transparent;
    border-bottom: solid 0 transparent;
    transform: rotate(-32deg);
}
.dracula__hair__right {
    position: absolute;
    z-index: 22;
    top: 16px;
    right: -26px;
    width: 0;
    height: 0;
    border-top: solid 0 transparent;
    border-left: solid 64px transparent;
    border-right: solid 22px transparent;
    border-bottom: solid 24px #000;
    transform: rotate(-72deg);
}
.dracula__hair__right::before {
    content: "";
    position: absolute;
    top: -15px;
    right: -30px;
    width: 0;
    height: 0;
    border-top: solid 24px #000;
    border-left: solid 44px transparent;
    border-right: solid 22px transparent;
    border-bottom: solid 0 transparent;
    transform: rotate(32deg);
}
.dracula__hair__center {
    position: absolute;
    z-index: 20;
    top: -36px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 80px;
    height: 60px;
}
.dracula__hair__center::before,
.dracula__hair__center::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 0;
    height: 0;
    border-top: solid 30px transparent;
    border-bottom: solid 30px transparent;
}
.dracula__hair__center::before {
    left: 0;
    border-right: solid 40px #000;
    border-left: solid 0 transparent;
}
.dracula__hair__center::after {
    right: 0;
    border-left: solid 40px #000;
    border-right: solid 0 transparent;
}
/* ----------------
    body
------------------*/
.dracula__body {
    position: absolute;
    z-index: 2;
    top: 140px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 200px;
    height: 154px;
}
.dracula__body__wrapper {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 100px;
    overflow: hidden;
}
.dracula__body__inner {
    position: absolute;
    bottom: 0;
    left: 40px;
    width: 120px;
    height: 100px;
    overflow: hidden;
    transform-origin: 50px 50px;
    transition: all ease 0.8s;
}
.dracula__body__inner::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: solid 0 transparent;
    border-right: solid 60px transparent;
    border-left: solid 60px transparent;
    border-bottom: solid 240px var(--body);
}
.dracula__body__inner::after {
    content: "";
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
}
.dracula__body__best {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 40px;
    height: 100%;
    background: #4e6069;
}
.dracula__body__best::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 50px #fff;
    border-left: solid 20px transparent;
    border-right: solid 20px transparent;
    border-bottom: solid 0 transparent;
}
.dracula__body__best::after {
    content: "";
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
}
.dracula__body__tie {
    position: absolute;
    top: 20px;
    left: 39px;
    width: 0;
    height: 0;
    border-top: solid 12px transparent;
    border-bottom: solid 12px transparent;
    border-left: solid 28px #b00025;
    border-right: solid 0 transparent;
}
.dracula__body__tie::before {
    content: "";
    position: absolute;
    top: -12px;
    left: -14px;
    width: 0;
    height: 0;
    border-top: solid 12px transparent;
    border-bottom: solid 12px transparent;
    border-right: solid 28px #b00025;
    border-left: solid 0 transparent;
}
.dracula__body__tie::after {
    content: "";
    position: absolute;
    top: -9px;
    left: -16px;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    background: #84001c;
}
.dracula__body__collar {
    position: absolute;
    top: 30px;
    left: 20px;
    width: 0;
    height: 0;
    border-top: solid 48px var(--body);
    border-left: solid 80px transparent;
    border-right: solid 80px transparent;
    border-bottom: solid 0 transparent;
    transition: all ease 0.8s;
}
/* ----------------
    arm
------------------*/
.dracula__body__box {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 140px;
    overflow: hidden;
}
.dracula__body__arm {
    position: absolute;
    z-index: 1;
    width: 20px;
    height: 70px;
    border-radius: 10px;
    transform-origin: 10px 10px;
    background: var(--body);
    transition: all ease 0.8s;
}
.arm--L {
    top: 52px;
    right: 50px;
    transform: rotate(-36deg);
}
.arm--L::before {
    content: "";
    position: absolute;
    bottom: -40px;
    left: 0;
    width: 100%;
    height: 60px;
    border-radius: 10px 10px 0 0;
    transform-origin: 10px 10px;
    transform: rotate(36deg);
    transition: inherit;
    background: var(--body);
}
.arm--R {
    top: 52px;
    left: 50px;
    transform: rotate(36deg);
}
.arm--R::before {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 50px;
    border-radius: 10px;
    transform-origin: 10px 10px;
    transform: rotate(140deg);
    transition: inherit;
    background: var(--body);
}
.dracula__body__hand {
    position: absolute;
    z-index: 3;
    background: var(--skin_A);
    transition: all ease 0.8s;
}
.hand--L {
    left: 18px;
    bottom: 60px;
    width: 22px;
    height: 26px;
    border-radius: 8px 2px 2px 8px;
}
.hand--R {
    right: 18px;
    bottom: -30px;
    width: 26px;
    height: 22px;
    border-radius: 8px 8px 2px 2px;
}
/* ----------------
    grass
------------------*/
.wineGrass {
    position: absolute;
    z-index: 1;
    left: 8px;
    bottom: 60px;
    width: 40px;
    height: 76px;
    transition: all ease 0.8s;
    transform: translateX(-2px);
    animation: turn linear 0.8s infinite alternate;
}
.wineGrass__cup {
    position: relative;
    width: 100%;
    height: 42px;
    border-radius: 2px 2px 24px 24px;
    background: rgba(255, 255, 255, 0.3);
}
.wineGrass__wine {
    content: "";
    position: absolute;
    top: 10px;
    left: -4px;
    width: 48px;
    height: 36px;
    transform-origin: top center;
    animation: wine linear 0.8s infinite alternate;
    transform: rotate(-5deg);
    overflow: hidden;
}
.wineGrass__wine::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 6px;
    right: 0;
    width: 36px;
    height: 32px;
    border-radius: 0 0 24px 24px;
    transform-origin: top center;
    animation: wine-rev linear 0.8s infinite alternate;
    transform: rotate(5deg);
    background: rgba(210, 0, 50, 0.6);
}
.wineGrass__parts {
    position: absolute;
    bottom: 0;
    left: 6px;
    width: 28px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.3);
}
.wineGrass__parts::before {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 4px;
    height: 30px;
    background: rgba(255, 255, 255, 0.3);
}
.wineGrass__parts::after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 2px;
    width: 22px;
    height: 26px;
    border-radius: 8px 2px 2px 8px;
    background: var(--skin_A);
    transition: all ease 0.8s;
}
/* ----------------
    reflection
------------------*/
.reflection {
    position: absolute;
    z-index: 30;
    top: 16px;
    left: 16px;
    width: calc(240px - 32px);
    height: calc(300px - 32px);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.8) inset;
    transition: all ease 0.4s;
    overflow: hidden;
}
.reflection::before,
.reflection::after {
    content: "";
    position: absolute;
    top: -40px;
    transform: rotate(-32deg);
    height: 280px;
    background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    transition: inherit;
}
.reflection::before {
    left: 0;
    width: 40px;
}
.reflection::after {
    left: 64px;
    width: 16px;
}
.panel--1:hover ~ .dracula .dracula__face__eye__inner::before {
    top: 0;
    left: 0;
}
.panel--2:hover ~ .dracula .dracula__face__eye__inner::before {
    top: 0;
    left: 5px;
}
.panel--3:hover ~ .dracula .dracula__face__eye__inner::before {
    top: 0;
    left: 10px;
}
.panel--4:hover ~ .dracula .dracula__face__eye__inner::before {
    top: 4px;
    left: 0;
}
.panel--5:hover ~ .dracula .dracula__face__eye__inner::before {
    top: 4px;
    left: 5px;
}
.panel--6:hover ~ .dracula .dracula__face__eye__inner::before {
    top: 4px;
    left: 10px;
}
.panel--7:hover ~ .dracula .dracula__face__eye__inner::before {
    top: 8px;
    left: 0;
}
.panel--8:hover ~ .dracula .dracula__face__eye__inner::before {
    top: 8px;
    left: 5px;
}
.panel--9:hover ~ .dracula .dracula__face__eye__inner::before {
    top: 8px;
    left: 10px;
}
.button:hover ~ .dracula .dracula__head {
    top: 150px;
    left: 10px;
    height: 160px;
    transform: scale(1.2) rotate(-20deg);
}
.button:hover .text {
    background: #574600;
}
.button:hover ~ .dracula .dracula__face::before {
    background: transparent;
}
.button:hover ~ .dracula .dracula__face::after {
    background: #190055;
}
.button:hover ~ .dracula .dracula__head__wrapper {
    animation: dracula_face 5s linear infinite;
}
.button:hover ~ .dracula .dracula__face__top {
    background: var(--skin_B);
}
.button:hover ~ .dracula .dracula__face__top::before {
    border-bottom-color: var(--skin_B);
}
.button:hover ~ .dracula .dracula__face__top::after {
    border-bottom-color: var(--skin_B);
}
.button:hover ~ .dracula .dracula__face__bottom {
    background: var(--skin_B);
}
.button:hover ~ .dracula .dracula__face__eye {
    background: #a6c8e0;
}
.button:hover ~ .dracula .dracula__eye--L {
    transform: rotate(-10deg);
}
.button:hover ~ .dracula .dracula__eye--R {
    transform: rotate(10deg);
}
.button:hover ~ .dracula .dracula__eye--L::before {
    right: 0;
}
.button:hover ~ .dracula .dracula__eye--R::before {
    left: 0;
}
.button:hover ~ .dracula .dracula__face__eye::after {
    background: var(--skin_B);
    height: 16px;
}
.button:hover ~ .dracula .dracula__face__eye__inner {
    top: 4px;
    background: #ffe01c;
}
.button:hover ~ .dracula .dracula__face__eye__inner::before {
    top: 2px;
    left: 9px;
    width: 8px;
}
.button:hover ~ .dracula .fang--T::before,
.button:hover ~ .dracula .fang--T::after {
    top: 0;
}
.button:hover ~ .dracula .fang--B::before,
.button:hover ~ .dracula .fang--B::after {
    bottom: 0;
}
.button:hover ~ .frame .frame__inner {
    background: #6a0044;
}
.button:hover ~ .frame .frame__inner::before {
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.8) inset;
}
.button:hover ~ .frame .bat {
    right: 48px;
}
.button:hover ~ .dracula .dracula__body__inner {
    left: 30px;
    bottom: -48px;
    transform: rotate(-30deg);
}
.button:hover ~ .dracula .dracula__body__collar {
    transform: rotate(-20deg) scale(1.1);
    top: 80px;
    left: -20px;
}
.button:hover ~ .dracula .arm--L {
    top: 84px;
    right: 80px;
    transform: rotate(-110deg);
}
.button:hover ~ .dracula .arm--L::before {
    transform: rotate(100deg);
}
.button:hover ~ .dracula .arm--R::before {
    height: 30px;
}
.button:hover ~ .dracula .dracula__body__hand {
    background: var(--skin_B);
}
.button:hover ~ .dracula .hand--R {
    bottom: 0;
}
.button:hover ~ .dracula .wineGrass {
    left: 4px;
    bottom: 0;
    animation-play-state: paused;
}
.button:hover ~ .dracula .wineGrass__parts::after {
    background: var(--skin_B);
}

.button:hover ~ .reflection {
    background: rgba(255, 255, 255, 0);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0) inset;
}
.button:hover ~ .reflection::before,
.button:hover ~ .reflection::after {
    opacity: 0;
}
@keyframes wine {
    0% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(5deg);
    }
}
@keyframes wine-rev {
    0% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(-5deg);
    }
}
@keyframes turn {
    0% {
        transform: translateX(-2px);
    }
    100% {
        transform: translateX(2px);
    }
}
@keyframes wing_L {
    0% {
        transform: rotate(20deg);
    }
    100% {
        transform: rotate(-20deg);
    }
}
@keyframes wing_R {
    0% {
        transform: rotate(-20deg);
    }
    100% {
        transform: rotate(20deg);
    }
}
@keyframes bat_move_1 {
    0% {
        transform: translateY(-20px);
    }
    50% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(-20px);
    }
}
@keyframes bat_move_2 {
    0% {
        left: -16px;
    }
    50% {
        left: 16px;
    }
    100% {
        left: -16px;
    }
}
@keyframes dracula_face {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(0);
    }
    22% {
        transform: translateY(10px);
    }
    24% {
        transform: translateY(0);
    }
    26% {
        transform: translateY(10px);
    }
    28% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(10px);
    }
    32% {
        transform: translateY(0);
    }
    34% {
        transform: translateY(10px);
    }
    36% {
        transform: translateY(0);
    }
    38% {
        transform: translateY(10px);
    }
    40% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(0);
    }
}

Button with animated Dracula hover effect

Recommended

Login Form with Input Validation

A real moving Solar System with all planets.

Challenge 01-1 Multi-Button Animation

HTML

CSS

JS

Recommended

Login Form with Input Validation

A real moving Solar System with all planets.

Challenge 01-1 Multi-Button Animation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS