Как создать такую кнопку на сайте

Question

Всем привет. Подскажите как создать такую кнопку. Основной вопрос в том как создать волнообразную шторку.

Answer 1

Добро пожаловать, Новичок! Самым быстрым и простым решением этой "волны" на кнопке, будет сделать всю кнопку целиком в векторной графике, формата .svg. В этом тебе может помочь Photoshop, из бесплатных графических редакторов - GIMP (есть на Win и Linux) или Inkscape (Linux).

Answer 2

Вот так примерно - svg + html + css

Вот здесь: https://codepen.io/topicstarter/pen/YzXpEPP можете потренироваться поизменять параметры

На SVG собираем структуру: два rect с закруглёнными краями

Вставляем текст - один на SVG один на html

Стилизуем в css текст из html абсолютно

Вешаем клик или на html - оборачиваем тегом <a href=""></a>

Либо на javascript: window.open

На выходе результат

.svg-btn {
  width: 150px;
  position: relative;
  height: 150px;
  cursor: pointer;
}

.description {
  position: absolute;
  bottom: 4px;
  font-size: 12px;
  text-align: center;
  left: 50%;
  transform: translateX(-55%);
  width: 100%;
}

<div class="svg-btn">
  <svg viewBox="-2 -2 500 500">
    <defs>
        <linearGradient id="gr" x1="0" x2="0" y1="0" y2="50%">
          <stop offset="0%" stop-color="#ff8532"/>
          <stop offset="100%" stop-color="#ff5b95"/>
        </linearGradient>
        <pattern id="ptn" width="24" height="16"
             x="0" y="0"
             patternUnits="userSpaceOnUse">
        <circle cx="8" cy="2" r="8" fill="url(#gr)"/>
     </pattern>
    </defs>

    <rect x="0" 
          y="0" 
          width="450" 
          height="450" 
          ry="20"        
          stroke="url(#gr)"
          stroke-width="4px"
          fill="#fff" />
    
          <line x1="16" x2="440" y1="98" y2="98" stroke="url(#ptn)" stroke-width="20"/>
    
      <rect x="0" 
            y="0" 
            width="450" 
            height="100" 
            ry="20"
            fill="url(#gr)"/>
      <text x="70" y="70" font-size="50px" font-family="sans-serif" fill="#fff"> Most Popular</text>
      <text x="145" y="235" font-size="70px" font-family="sans-serif" fill="url(#gr)"> Free</text>
      <text x="148" y="305" font-size="70px" font-family="sans-serif" fill="url(#gr)"> Trial</text>

  </svg>
  <div class="description">
    <p>3 Days free<br> then 599.00 p/week</p>
  </div>
</div>

БЛОГ НА HUSL

Как создать такую кнопку на сайте

Ответы (2 шт):