THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

๐ŸŒŠ 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;
}





16 comments:


  1. Wonderful Information! Your blog is very nice, such useful information you are sharing. I really like your blog.
    Wealth Coaching Columbus Financial & Success Coach Total Financial & Success Transformation Click for more information

    ReplyDelete
  2. hello bro app hmare liye kya one click se copy code wala button lga sakteho plz ese to mai copy nhi ker pa reha plz bro reply kerdo

    ReplyDelete
  3. Great article. Hi! Really like this site because all information has already been given to this page regarding this website! So awesome! Great job!
    Satta king fast
    Satta result

    ReplyDelete
  4. Nice post. Very nice and informative content thanks for this wonderful content best wishes for you ahead.
    Satta king fast
    Satta result

    ReplyDelete
  5. This is a very useful website. This article is really helpful. Thank you so much for sharing this great knowledge.If you're interested just click this link. Thank You so much. Satta Bajar

    ReplyDelete
  6. #36 : Handling Complex Multiple Input Form States in React JS in Hindi is ka code kaha heee?

    ReplyDelete
  7. please put photo link in the video description because it become very hard to find photo and it takes alot of time so its my kind request to you please put photos link in description that u r using in video

    ReplyDelete
  8. Very nice and informative content thanks for this wonderful content best wishes for you ahead
    Please visit with us transfer video to dvd

    ReplyDelete
  9. Your blog is very nice, such useful information you are sharing. I really like your blog. Thank you so much for sharing this information. It is really helpful. Please visit us nerdbox


    ReplyDelete