🌊 CSS Wave Button Animation Hover Effect | 2022 CSS Challenge #1

🌊 CSS Wave Button Animation Hover Effect | 2022 CSS Challenge #1| Free Source Code

After working on CSS/CSS3 for so long, It's time to move our knowledge to more advanced part. Where we will see How to use the Logics and how to use CSS3 properties in our applications. We will go through each property line by line and understand the meaning and the output of it in a practically manner.

First, I highly recommend you to watch the video and then look for the code and try to do it by yourself. And use the code for reference.

Here is the code

Here is the complete code of my HTML file( Complete UI)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <a
      href="https://www.youtube.com/channel/UCwfaAHy4zQUb2APNOGXUCCA"
      target="_thapa"
    >
      thapa technical
      <div class="wave"></div>
    </a>
  </body>
</html>

Here is the complete code of my CSS file( Complete UI)

@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;
600&family=Source+Sans+Pro:wght@600&family=Zen+Antique+Soft&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Source Sans Pro", sans-serif;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #272727;
}
a {
  text-decoration: none;
  padding: 15px 30px;
  color: #00aeff;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  position: relative;
  border: 2px solid #00aeff;
  overflow: hidden;
}

.wave {
  position: absolute;
  width: 100%;
  height: 100%;
  top: calc(100% + 22px);
  left: 0;
  background-color: #00aeff;
  transition: all 1s;
  z-index: -1;
}

.wave::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 22px;
  background-image: url("./wave.png");
  top: -22px;
  animation: wavy 0.5s linear infinite;
}
@keyframes wavy {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 122px;
  }
}

a:hover .wave {
  top: 0;
}

a:hover {
  color: #fff;
}