I'm trying to create a wave animation effect using CSS. The animation works fine, but the wave doesn't cover the entire width of the button. Instead, there's extra space on the sides, and it doesn't adapt well to the button's size.

Here is my HTML and CSS:

@import url("+Sans");

.customer-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 15px;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
}

.customer-main a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #ffffff;
  color: #007bff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  min-width: 140px;
  height: 45px;
  border: 2px solid #007bff;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
}

.customer-main a i {
  margin-right: 8px;
}

.customer-main a:before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 130px;
  background-color: #0097e6;
  top: 30px;
  left: 50%;
  transform: translate(-50%);
  animation: wave 5s infinite linear;
  transition: all 1s;
}

.customer-main a:hover:before {
  top: 15px;
}

@keyframes wave {
  0% {
    transform: translate(-50%) rotate(-180deg);
  }
  100% {
    transform: translate(-50%) rotate(360deg);
  }
}

.customer-main a span {
  position: relative;
  color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-weight: 600;
  z-index: 1;
}

<div class="customer-main">
  <a href="#"><i class="fa-solid fa-box"></i> <span>Orders</span></a>
  <a href="#"><i class="fa-solid fa-heart"></i> <span>Wishlist</span></a>
  <a href="#"><i class="fa-solid fa-ticket"></i> <span>Coupons</span></a>
  <a href="#"><i class="fa-solid fa-envelope"></i> <span>Contact Us</span></a>
</div>

I'm trying to create a wave animation effect using CSS. The animation works fine, but the wave doesn't cover the entire width of the button. Instead, there's extra space on the sides, and it doesn't adapt well to the button's size.

Here is my HTML and CSS:

@import url("https://fonts.googleapis/css?family=Noto+Sans");

.customer-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 15px;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
}

.customer-main a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #ffffff;
  color: #007bff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  min-width: 140px;
  height: 45px;
  border: 2px solid #007bff;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
}

.customer-main a i {
  margin-right: 8px;
}

.customer-main a:before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 130px;
  background-color: #0097e6;
  top: 30px;
  left: 50%;
  transform: translate(-50%);
  animation: wave 5s infinite linear;
  transition: all 1s;
}

.customer-main a:hover:before {
  top: 15px;
}

@keyframes wave {
  0% {
    transform: translate(-50%) rotate(-180deg);
  }
  100% {
    transform: translate(-50%) rotate(360deg);
  }
}

.customer-main a span {
  position: relative;
  color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-weight: 600;
  z-index: 1;
}

<div class="customer-main">
  <a href="#"><i class="fa-solid fa-box"></i> <span>Orders</span></a>
  <a href="#"><i class="fa-solid fa-heart"></i> <span>Wishlist</span></a>
  <a href="#"><i class="fa-solid fa-ticket"></i> <span>Coupons</span></a>
  <a href="#"><i class="fa-solid fa-envelope"></i> <span>Contact Us</span></a>
</div>

Issue:

1. The wave animation works, but it doesn't adapt to the button's width.

2. I want the wave to cover the button's entire width on all screen sizes without changing its height or animation style.

How can I adjust the wave width to match the button width without affecting the animation?

Any suggestions would be appreciated. Thanks!

• html
• css

• 2 Your "wave" is a fixed size...320px. You need it to adapt to the size of the parent. I'd rethink your approach. An animated clip-path:path or similar would probably be optimal – Paulie_D Commented Mar 21 at 14:43
• @Paulie_D Thanks for the suggestion! I understand that the fixed size (320px) is causing the issue. I’m interested in the idea of using clip-path for the wave effect. Could you explain a bit more or share an example of how I could achieve a similar animation using clip-path? I’d like to keep the rotating wave effect while ensuring it covers the button width properly. – Google User Commented Mar 21 at 14:50

1 Answer 1

Quite simply your before element just does not scale. You have it static at 320px which will not work on all sizes. Just make is so that it uses percentages and tune it to your liking, like so:

.customer-main a:before {
  ...
  /*  Scales with the button width   */
  width: 150%; 
  /*  The height will also scale with the 
  width to keep the wave consistent   */
  aspect-ratio: 1/1;
  /*  The border radius also needs to scale on a percentage basis
  and varied values produce a more dramatic effect */
  border-radius: 40% 30%;
  ...
}

@import url("https://fonts.googleapis/css?family=Noto+Sans");

.customer-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 15px;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
}

.customer-main a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #ffffff;
  color: #007bff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  min-width: 140px;
  height: 45px;
  border: 2px solid #007bff;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
}

.customer-main a i {
  margin-right: 8px;
}

.customer-main a:before {
  content: "";
  position: absolute;
  width: 150%;
  aspect-ratio: 1/1;
  border-radius: 40% 30%;
  background-color: #0097e6;
  top: 30px;
  left: 50%;
  transform: translate(-50%);
  animation: wave 5s infinite linear;
  transition: all 1s;
}

.customer-main a:hover:before {
  top: 15px;
}

@keyframes wave {
  0% {
    transform: translate(-50%) rotate(-180deg);
  }
  100% {
    transform: translate(-50%) rotate(360deg);
  }
}

.customer-main a span {
  position: relative;
  color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-weight: 600;
  z-index: 1;
}

<div class="customer-main">
  <a href="#"><i class="fa-solid fa-box"></i> <span>Orders</span></a>
  <a href="#"><i class="fa-solid fa-heart"></i> <span>Wishlist</span></a>
  <a href="#"><i class="fa-solid fa-ticket"></i> <span>Coupons</span></a>
  <a href="#"><i class="fa-solid fa-envelope"></i> <span>Contact Us</span></a>
</div>

Hopefully this helps. For a more consistent experience I would recommend animated svgs or clip path based animations.