Верстка кнопки с закругленными углами

Question

Как нарисовать такое? это реально через сss?

Answer 1

Всё делал в векторном редакторе Inksape то есть импортируем картинку и обводим по контуру ...сохраняем этот svg и потом как в обычном css

a:hover path 

a:hover text

И увидим такой результат - нажмите на Выполнить код

.button {
  width: 220px;
}

path,
a {
  transition: 0.14s linear;
}

a:hover path {
  fill: blue
}

a:hover text {
  fill: #000
}

<div class="button">
  <svg version="1.1" viewBox="0 0 34.995 11.737" xmlns="http://www.w3.org/2000/svg">
  <a href="http://google.com" target="_blank">
 <path d="M 0.16451152,4.074708 C 0.71171137,-3.7768454 10.183977,4.8849233 29.441151,0.16183963 31.847243,-0.58667716 34.481805,2.9753094 34.821344,5.4721609 35.122921,15.804867 26.39111,6.9484699 10.435791,11.131845 7.7107581,11.349574 4.2040946,11.011375 2.0510729,9.105539 0.71002092,7.918452 -0.03809088,6.535088 0.16451152,4.074708 Z" fill="#000" />
  <text x="7" y="7.2" font-size="4px" font-family="sans-serif" fill="#fff" font-weight="700">Order Now</text>
</a>
</svg>
</div>

Answer 2

Вариант с анимацией контуров кнопки при наведении

Реализуется с помощью изменения атрибута "d" path контура кнопки

 <animate
         attributeName="d"
         begin="svg1.mouseover"
         end="svg1.mouseout"
         dur="2s"
         repeatCount="5"
         restart="whenNotActive"
         values="
            m26 15c9.1 1.1 18 2 26.2 3.7 13.6 2.9 27.8 0.4 41.7-0.6 8.7-0.6 17.4-5 26-3.5 8 1.4 16.5 5 21.7 11.3 3.1 3.8 4.4 9.3 4.1 14.3-0.3 5.2-1.7 11.5-6.1 14.3-5.3 3.4-12.5 0-18.8-0.4-7.6-0.4-15.1-1.9-22.7-2.2-7.6-0.2-15.3 0.1-22.9 0.8-7 0.6-13.8 2.6-20.7 3.1-7 0.5-14.3 2.1-20.9-0.2C27.5 53.6 21.5 49.5 18.2 44 14.8 38.3 12.6 30.6 14.9 24.4c1.7-4.6 6.3-10 11.1-9.4z;

Добавлена тень к кнопке с помощью фильтров SVG, при наведении курсора

При клике осуществляется реальный переход в раздел вопросов CSS/

#button {
fill:black;
transition:fill 0.5s;
}
#button:hover {
fill:crimson;
filter:url(#dropshadow);
} 
text {
font-size:16px;
font-family:sans-serif;
fill:#fff;
font-weight:700;
}
#button:hover > text {
filter:url(#dropshadow);
font-size:18px;
}

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="160" height="70" viewBox="0 0 160 70" preserveAspectRatio="xMinYMin meet"> 
 <defs>  
    <!-- Тень кнопки -->
<filter id="dropshadow" x="-10%" y="-10%" width="200%" height="200%" >
        <feOffset result="offsetResult" in="SourceAlpha" dx="2" dy="2" />
        <feGaussianBlur result="blurResult" in="offsetResult" stdDeviation="5" />
        <feBlend in="SourceGraphic" in2="blurResult" mode="normal" />
    </filter>
</defs>            
    <!-- Переход по ссылке в раздел вопросов и ответов CSS -->
 <a xlink:href="https://ru.stackoverflow.com/questions/tagged/css"> 
   <g id="button">
 <path 
     
     d="m26 15c9.1 1.1 18 2 26.2 3.7 13.6 2.9 27.8 0.4 41.7-0.6 8.7-0.6 17.4-5 26-3.5 8 1.4 16.5 5 21.7 11.3 3.1 3.8 4.4 9.3 4.1 14.3-0.3 5.2-1.7 11.5-6.1 14.3-5.3 3.4-12.5 0-18.8-0.4-7.6-0.4-15.1-1.9-22.7-2.2-7.6-0.2-15.3 0.1-22.9 0.8-7 0.6-13.8 2.6-20.7 3.1-7 0.5-14.3 2.1-20.9-0.2C27.5 53.6 21.5 49.5 18.2 44 14.8 38.3 12.6 30.6 14.9 24.4c1.7-4.6 6.3-10 11.1-9.4z" >
        <!-- Анимация контуров кнопки с помощью изменения атрибута "d" Path          -->
      <animate
         attributeName="d"
         begin="svg1.mouseover"
         end="svg1.mouseout"
         dur="2s"
         repeatCount="5"
         restart="whenNotActive"
         values="
            m26 15c9.1 1.1 18 2 26.2 3.7 13.6 2.9 27.8 0.4 41.7-0.6 8.7-0.6 17.4-5 26-3.5 8 1.4 16.5 5 21.7 11.3 3.1 3.8 4.4 9.3 4.1 14.3-0.3 5.2-1.7 11.5-6.1 14.3-5.3 3.4-12.5 0-18.8-0.4-7.6-0.4-15.1-1.9-22.7-2.2-7.6-0.2-15.3 0.1-22.9 0.8-7 0.6-13.8 2.6-20.7 3.1-7 0.5-14.3 2.1-20.9-0.2C27.5 53.6 21.5 49.5 18.2 44 14.8 38.3 12.6 30.6 14.9 24.4c1.7-4.6 6.3-10 11.1-9.4z;
            
            m34.2 20.1c9.5-1.3 9.8-1.4 18-1.4 13.6 2.9 28.9 3.6 42.8 2.6 8.7-0.6 20.6-5.9 27.1-8.1 9.8-1.5 15.2 0.5 20.3 6.8 3.1 3.8 4.4 8.4 4.1 13.3-0.3 5.2-1.7 11.5-6.1 14.3-5.3 3.4-11.8 4.4-18.1 4-7.6-0.4-16.6-3.3-24.2-3.5-7.6-0.2-9.3-0.7-16.9 0-7 0.6-19.7 7.3-26.7 7.8-7 0.5-11.7 2.3-20.3 0.7-5-2.7-5.7-2.2-10.1-6.9-2-2.2-4.8-10.6-2.9-17.4 1.7-4.6 8.6-10.4 13-12.2z;
            
            m34.2 20.1c9.5-1.3 9.8-1.4 18-1.4 13.6 2.9 28.9 3.6 42.8 2.6 8.7-0.6 20.6-5.9 27.1-8.1 9.8-1.5 15.2 0.5 20.3 6.8 3.1 3.8 4.4 8.4 4.1 13.3-0.3 5.2-1.7 11.5-6.1 14.3-5.3 3.4-11.8 4.4-18.1 4-7.6-0.4-16.6-3.3-24.2-3.5-7.6-0.2-9.3-0.7-16.9 0-7 0.6-19.7 7.3-26.7 7.8-7 0.5-11.7 2.3-20.3 0.7-5-2.7-5.7-2.2-10.1-6.9-2-2.2-4.8-10.6-2.9-17.4 1.7-4.6 8.6-10.4 13-12.2z;
            
            m26 15c9.1 1.1 18 2 26.2 3.7 13.6 2.9 27.8 0.4 41.7-0.6 8.7-0.6 17.4-5 26-3.5 8 1.4 16.5 5 21.7 11.3 3.1 3.8 4.4 9.3 4.1 14.3-0.3 5.2-1.7 11.5-6.1 14.3-5.3 3.4-12.5 0-18.8-0.4-7.6-0.4-15.1-1.9-22.7-2.2-7.6-0.2-15.3 0.1-22.9 0.8-7 0.6-13.8 2.6-20.7 3.1-7 0.5-14.3 2.1-20.9-0.2C27.5 53.6 21.5 49.5 18.2 44 14.8 38.3 12.6 30.6 14.9 24.4c1.7-4.6 6.3-10 11.1-9.4z"
           />           
       </path>
     <text x="41" y="41"  >Order Now</text> 
     </g>
    </a> 

</svg>

БЛОГ НА HUSL

Верстка кнопки с закругленными углами

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

Вариант с анимацией контуров кнопки при наведении