Saksham Digital Technology - Coding Institute

Wave Button Animation

https://youtube.com/shorts/_k07U6-L0d0?si=LAlJT4vC9kuDG9xn

HTML CODE:-

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<a href="#">
<span>Saksham</span>
<div class="container"></div>
</a>
</body>
</html>

CSS CODE:-

*{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body{
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background: black;
    }
    a{
      position: relative;
      padding: 20px 50px;
      display: block;
      text-decoration: none;
      text-transform: uppercase;
      width: 200px;
      overflow: hidden;
      border-radius: 45px;
    }
    a span {
      position: relative;
      color: white;
      font-size: 20px;
      letter-spacing: 2px;
      z-index: 1;
    }
    a .container{
      position: absolute;
      top: -70px;
      left: 0;
      width: 200px;
      height: 200px;
      background: blue;
      transition: .5s;
    }
    a .container::before {
      content: '';
      width: 200%;
      height: 200%;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -75%);
      border-radius: 45%;
      background: #333;
      animation: animate 5s linear infinite;
    }
    @keyframes animate {
      0% {
        transform: translate(-50%, -75%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -75%) rotate(360deg);
      }
    }
    a:hover .container{
      top: -120px;
    }