Как создать волны на кнопках с css и html?

Question

Я пытаюсь создать волновые линии на кнопке, но я понятия не имею об этом.

Мне нужна кнопка, подобная этой

Есть ли способ создать кнопку, подобную этой, или любой другой способ создания.

Буду признателен за любые предложения.

Answer 1

Используйте несколько <svg> с и <path> с, и это сработает.

Вот ваш код:

.container {
  width: 500px;
  height: 100px;
  background-color: rgb(0, 224, 150);
  border: none;
  border-radius: 5px;
}

.text {
  width: inherit;
  position: absolute;
  top: 50px;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  color: white;
  font-size: 24px;
}

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap" rel="stylesheet">

<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill-opacity="0" stroke="#fff" stroke-width="2" d="M0,192L80,160C160,128,320,64,480,48C640,32,800,64,960,64C1120,64,1280,32,1360,16L1440,0L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
    <path fill-opacity="0" stroke="#fff" stroke-width="2" d="M0,160L48,133.3C96,107,192,53,288,74.7C384,96,480,192,576,202.7C672,213,768,139,864,117.3C960,96,1056,128,1152,170.7C1248,213,1344,267,1392,293.3L1440,320L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
  <path fill-opacity="0" stroke="#fff" stroke-width="2" d="M0,192L60,170.7C120,149,240,107,360,106.7C480,107,600,149,720,176C840,203,960,213,1080,202.7C1200,192,1320,160,1380,144L1440,128L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
    <path fill-opacity="0" stroke="#fff" stroke-width="2" d="M0,192L60,170.7C120,149,240,107,360,117.3C480,128,600,192,720,197.3C840,203,960,149,1080,117.3C1200,85,1320,75,1380,69.3L1440,64L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
    <path fill-opacity="0" stroke="#fff" stroke-width="2" d="M0,0L60,21.3C120,43,240,85,360,112C480,139,600,149,720,133.3C840,117,960,75,1080,90.7C1200,107,1320,181,1380,218.7L1440,256L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
    <path fill-opacity="0" stroke="#fff" stroke-width="2" d="M0,256L60,234.7C120,213,240,171,360,128C480,85,600,43,720,32C840,21,960,43,1080,69.3C1200,96,1320,128,1380,144L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
    <path fill-opacity="0" stroke="#fff" stroke-width="2" d="M0,128L60,112C120,96,240,64,360,85.3C480,107,600,181,720,229.3C840,277,960,299,1080,304C1200,309,1320,299,1380,293.3L1440,288L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
    <path fill-opacity="0" stroke="#fff" stroke-width="2" d="M0,64L60,106.7C120,149,240,235,360,234.7C480,235,600,149,720,117.3C840,85,960,107,1080,101.3C1200,96,1320,64,1380,48L1440,32L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
    <path fill-opacity="0" stroke-width="2" stroke="#fff"d="M0,224L40,224C80,224,160,224,240,208C320,192,400,160,480,138.7C560,117,640,107,720,101.3C800,96,880,96,960,128C1040,160,1120,224,1200,261.3C1280,299,1360,309,1400,314.7L1440,320L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>
  </svg>
  <div class="text">let's try</div>
</div>

Живая демоверсия: https://codepen.io/marchmello/pen/rNOWWXa?editors=1100