การบ้าน WebAudio (Branch 14660) (Copy 14679)

✨ CHAWANWIT KUANPHIPATKUL

<head>
  <style>
     button{
    padding:20px 50px;
    font-size: 1.5rem;
    cursor: pointer;
    border:0px;
    background:transparent;
    position: relative;
    margin:20px;
    transition:all 0.25s ease;
  }
    .btn1{
      background: black;
      color:white;
      border-radius:40px;
      transition: all 0.25s ease;
      position:relative;
      width: 100px;
      height: 50px;
    }
    .btn1:hover{
      transform: translate(-12px, -12px);
    }
    .btn1:hover::before{
      transform: translate(12px, 12px);
    }
    .btn1:hover::after{
      transform: translate(6px, 6px);
    }
    .btn1::after, .btn1::before{
		content:"";
      position:absolute;
      opacity:0.3;
      border-radius: inherit;
      background: black;
      width:100%;
      height:100%;
      left:0;
      bottom:0;
      z-index:-1;
      transition: all 0.25s ease;
    }
    .btn4{
      color:white;
      overflow: hidden;
      border-radius: 30px;
      box-shadow: 0px -0px 0px 0px rgba(143, 64, 248, 0.5), 0px 0px 0px 0px rgba(39, 200, 255, 0.5);
      width:100px;
      height:50px;
    }
    .btn4:hover{
      transform:translate(0,-6px);
      box-shadow:10px -10px 25px 0px rgba(143, 64, 248, 0.5), -10px 10px 25px 0px rgba(39, 200, 255, 0.5);
    }
    .btn4:hover::after{
      transform: rotate(150deg);
    }
    .btn4::after{
      content:"";
      width:400px;
      height:400px;
      position: absolute;
      top: -50px;
      left: -100px;
      background-color: #ff3cac;
      background-image: linear-gradient(225deg, #27d86c 0%,#26cad8 50%, #c625d0 100%);
      z-index:-1;
      transition: all 0.25s ease;
    }
  </style>
</head>
<body>
  <button class="btn1">Button 1</button>
  <button class="btn4">Button 2</button>
</body>