Как сверстать кнопку?

101

05 февраля 2022, 16:00

Как можно такую кнопку сверстать?

Answer 1

Решение SVG

Если нужно сверстать точь в точь до пикселя, то конечно без SVG и векторного редактора не обойтись.

Загружаете вашу картинку с её размерами 358 х 115px в векторный редактор:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="358" height="115" viewBox="0 0 358 115" preserveAspectRatio="xMinYMin meet" style="border:1px solid red;" >  
<image xlink:href="https://i.stack.imgur.com/F95y6.png" width="100%" height="100%" />
</svg>

Инструментом Рисовать кривые Безье shift+F6, см. цифра 1 на рисунке, и наносите по контуру загруженной картинки узловые точки

С помощью инструмента - Редактировать узлы контура на рис. (2) выделяете эти узлы - они должны окраситься в жёлтый цвет
Делаете их автоматически сглаженными (3) и рычагами управления узлов, добиваетесь нужной формы кривой.
Сохраняете файл в формате *.svg и копируете из него формулы path в другой файл SVG.

Смотрите результат, если форма кривой не устраивает, снова возвращаетесь в векторный редактор и корректируете.

Добавляем текст в SVG:

<text class="txt" x="179" y="65"  > В КОРЗИНУ </text>

Добавляем фильтр к тексту:

<defs>
    <filter id="drop-shadow" width="120%" height="120%">
       <feGaussianBlur in="SourceGraphic"  stdDeviation="1" result="shadow" />
       
      <feOffset in="shadow" dx="2" dy="1" result="shadow" />
           
      <feColorMatrix in="shadow" mode="matrix" values="1.6 1.7 1.8 0.1 0 0 0.1 0 0 0 0 0 1 0 0 0 0 0 1 -0.04" result="shadow" />
        <feBlend in="SourceGraphic"  />
    </filter>
  </defs>

Ниже полный код:

.container {
width:100%;
height:100%
}
#border1, #border2 {
fill:none;
stroke:#C532D4;
stroke-width:2;
}
.txt {
fill:#C532D4;
text-anchor:middle;
font-size:32px;
filter:url(#drop-shadow);
}

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 358 115" preserveAspectRatio="xMinYMin meet" >   
<defs>
    <filter id="drop-shadow" width="120%" height="120%">
       <feGaussianBlur in="SourceGraphic"  stdDeviation="1" result="shadow" />
       
      <feOffset in="shadow" dx="2" dy="1" result="shadow" />
           
      <feColorMatrix in="shadow" mode="matrix" values="1.6 1.7 1.8 0.1 0 0 0.1 0 0 0 0 0 1 0 0 0 0 0 1 -0.04" result="shadow" />
        <feBlend in="SourceGraphic"  />
    </filter>
  </defs>   
 <path id="border1" d="m23.1 87.7c0.9-6.6 2.3-9.4 3.6-15.3 2.9-12.6 6-24.2 9.5-39.7 1-4.3 1.7-7.3 2.8-11.6 1.1-4.6 4.2-9 11.1-8.2 18.4 2.2 16.7 1.4 25.3 2 38.8 2.7 71.9 5.8 109.3 7.8 26.3 1.4 53.4 2.8 83 4.3 21.6 1.1 50.6 3 69.5 3.7 3.7 0.1 4.8-1.2 4.8 7.7-0.1 7.5 0 12.5 0.2 20.1 0.1 2.2 0.1 4.8 0.3 8 0.5 10.9-3 10.9-5.5 11.1-9.8 0.8-19.2 1.5-28.3 2.2-84.5 6.2-147 9.1-277 16.4-3.3 0.2-9.3-2.2-8.4-8.4z" />
  <path id="border2" d="m18.3 89.7c2.6-12.9 5.2-22.4 7.9-33.6 2.5-10.6 4.2-20.5 7.4-31.9 1.8-6.3 5.7-15 12.2-15.3 14.1-0.7 27.9 1.5 41.9 2.2 14.3 0.7 28.5 1.3 42.8 2.2 13.5 0.9 27.1 2.2 40.6 3.1 14.7 0.9 29.4 1.4 44.1 2.2 14.4 0.8 28.8 1.7 43.2 2.6 12.1 0.8 24.1 1.9 36.2 2.6 11.3 0.7 22.7 1 34.1 1.6 2.7 0.2 5.4 0.4 8.1 0.5 4 0.2 8.7 2.7 8.6 6.5 0 1.3 0 2.6 0 3.8-0.1 12.4-0.2 22.3-0.1 35.6 0 2.6-0.4 9.7-4.5 10.3-8.2 1.1-17.9 1.2-26.9 1.7-30.4 1.9-60.8 3.8-91.2 5.7-28.2 1.8-56.5 3.6-84.7 5.2-21 1.2-41.9 2.2-62.9 3.5-13.4 0.8-26.8 1.6-40.2 2.6-8.4 0.6-17.9-4.8-16.6-11.4z" />
<text class="txt" x="179" y="65"  > В КОРЗИНУ </text> 
</svg>   
</div>

Answer 2

Не уверен что похоже ... просто как вариант решения

это если без svg

.item { 
  width: 240px; 
  height: 66px; 
  margin: 60px; 
  perspective: 200px; 
} 
 
.item-outer { 
  position: relative; 
  width: inherit; 
  height: inherit; 
  border: 6px double pink; 
  transform: rotateY(30deg); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  box-shadow: 0 0 10px pink inset; 
  border-radius: 10px; 
} 
 
.item-outer p { 
  margin-left: -20px; 
  font-size: 24px; 
  text-shadow: 0 0 1px pink; 
  color: pink; 
  transform: rotateY(0deg); 
}

<div class="item"> 
  <div class="item-outer"> 
    <p>В корзину</p> 
  </div> 
</div>

Answer 3

Анимация рамок

В вопросе не было такой задачи, пост в качестве бонуса

Добавляем дополнительные серые рамки, которые будут служить для показа трассы анимации розовых рамок Просто копируем path розовых рамок и окрашиваем в серый цвет.

Анимация будет реализована с помощью изменения атрибутов stroke-dasharray и stroke-dashoffset

Полная длина внутренней рамки - 740px

Длина внешней рамки - 773px

Одновременная анимация двух рамок SVG

stroke-dashoffset уменьшается от максимума до нуля, реализуя тем самым рисование бордюров вокруг кнопки

.container { 
width:100%; 
height:100%; 
background:#111; 
} 
#trace_In { 
fill:none; 
stroke:#828282; 
} 
#trace_Out { 
fill:none; 
stroke:#656565; 
} 
 
#border_In { 
fill:none; 
stroke:gold; 
stroke-width:2; 
stroke-dasharray:740px; 
stroke-dashoffset:740px; 
} 
#border_Out { 
fill:none; 
stroke:gold; 
stroke-width:2; 
stroke-dasharray:773px; 
stroke-dashoffset:773px; 
 
} 
 
.txt { 
fill:gold; 
text-anchor:middle; 
font-size:40px; 
filter:url(#drop-shadow); 
fill-opacity:0.2; 
}

<div class="container"> 
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
       viewBox="0 0 358 115" preserveAspectRatio="xMinYMin meet" >    
<defs> 
    <filter id="drop-shadow" width="120%" height="120%"> 
       <feGaussianBlur in="SourceGraphic"  stdDeviation="1" result="shadow" /> 
        
      <feOffset in="shadow" dx="2" dy="1" result="shadow" /> 
            
      <feColorMatrix in="shadow" mode="matrix" values="1.6 1.7 1.8 0.1 0 0 0.1 0 0 0 0 0 1 0 0 0 0 0 1 -0.04" result="shadow" /> 
        <feBlend in="SourceGraphic"  /> 
    </filter> 
  </defs>	 
  
   <!-- Серая внутренняя рамка, трасса анимации --> 
 <path id="trace_In" d="m23.8 87.7c0.9-6.6 2.3-9.4 3.6-15.3 2.9-12.6 6-24.2 9.5-39.7 1-4.3 1.6-6.4 2.6-10.7 1.1-4.6 4.1-8.5 11.1-8.2 18.7 0.6 24.6 1.1 24.6 1.1 0 0 71.9 5.8 109.3 7.8 26.3 1.4 47.7 2.3 77.3 3.8 21.6 1.1 49.9 2.6 68.2 3.4 6.6 0.3 10.6-0.7 10.5 8.2-0.1 14.6-0.2 34.6-0.2 34.6 0 0 0.8 5.5-6.3 5.7-9.8 0.3-16.6 0.7-25.7 1.4-84.5 6.2-146.2 9.1-276.2 16.4-3.3 0.2-9.3-2.2-8.4-8.4z" /> 
  
 <!-- Жёлтая внутренняя рамка --> 
 <path id="border_In" d="m23.8 87.7c0.9-6.6 2.3-9.4 3.6-15.3 2.9-12.6 6-24.2 9.5-39.7 1-4.3 1.6-6.4 2.6-10.7 1.1-4.6 4.1-8.5 11.1-8.2 18.7 0.6 24.6 1.1 24.6 1.1 0 0 71.9 5.8 109.3 7.8 26.3 1.4 47.7 2.3 77.3 3.8 21.6 1.1 49.9 2.6 68.2 3.4 6.6 0.3 10.6-0.7 10.5 8.2-0.1 14.6-0.2 34.6-0.2 34.6 0 0 0.8 5.5-6.3 5.7-9.8 0.3-16.6 0.7-25.7 1.4-84.5 6.2-146.2 9.1-276.2 16.4-3.3 0.2-9.3-2.2-8.4-8.4z" > 
     <animate 
	   attributeName="stroke-dashoffset" 
	   begin="svg1.mouseover" 
	   dur="2s" 
	   values="740;0" 
	   fill="freeze" 
	   restart="whenNotActive" /> 
 </path>	  
 <!-- Серая внешняя рамка, трасса анимации --> 
  <path id="trace_Out" d="m19.3 88.8c1.4-10 4.3-21.5 6.9-32.7 2.8-11.9 5.4-25.1 8.5-35.6 1.3-6.4 5.2-11.8 11.8-12 13.6-0.5 27.8 1.5 41.8 2.2 14.3 0.7 28.2 1.7 42.3 2.6 13.6 0.9 27.4 2.1 40.9 2.9 14.7 0.9 29.2 1.5 43.8 2.3 14.4 0.8 28.8 1.7 43.2 2.6 12.3 0.8 24.9 1.7 37 2.5 11.3 0.7 22.2 1.1 33.3 1.8 2.7 0.2 5.4 0.4 8.1 0.5 4 0.2 8.7 2.7 8.6 6.5 0 1.3 0 2.6 0 3.8-0.1 12.4-0.1 35.6-0.1 35.6 0 0 2 10-4.5 10.3-8.3 0.4-17.9 1.2-26.9 1.7-30.4 1.9-60.8 3.8-91.2 5.7-28.2 1.8-56.5 3.6-84.7 5.2-21 1.2-41.9 2.3-62.9 3.5C60.6 99.2 46.9 101 31.5 100.9 24.8 100.8 18.3 95.4 19.3 88.8Z" /> 
   <!-- Жёлтая внешняя рамка --> 
  <path id="border_Out" d="m19.3 88.8c1.4-10 4.3-21.5 6.9-32.7 2.8-11.9 5.4-25.1 8.5-35.6 1.3-6.4 5.2-11.8 11.8-12 13.6-0.5 27.8 1.5 41.8 2.2 14.3 0.7 28.2 1.7 42.3 2.6 13.6 0.9 27.4 2.1 40.9 2.9 14.7 0.9 29.2 1.5 43.8 2.3 14.4 0.8 28.8 1.7 43.2 2.6 12.3 0.8 24.9 1.7 37 2.5 11.3 0.7 22.2 1.1 33.3 1.8 2.7 0.2 5.4 0.4 8.1 0.5 4 0.2 8.7 2.7 8.6 6.5 0 1.3 0 2.6 0 3.8-0.1 12.4-0.1 35.6-0.1 35.6 0 0 2 10-4.5 10.3-8.3 0.4-17.9 1.2-26.9 1.7-30.4 1.9-60.8 3.8-91.2 5.7-28.2 1.8-56.5 3.6-84.7 5.2-21 1.2-41.9 2.3-62.9 3.5C60.6 99.2 46.9 101 31.5 100.9 24.8 100.8 18.3 95.4 19.3 88.8Z" > 
     <animate 
	   attributeName="stroke-dashoffset" 
	   begin="svg1.mouseover" 
	   dur="2s" 
	   values="773;0" 
	   fill="freeze" 
	   restart="whenNotActive" /> 
 </path>	 
<text class="txt" x="179" y="65"  > В КОРЗИНУ 
  <animate attributeName="fill-opacity" dur="2s" values="0.2;1" begin="svg1.mouseover"  fill="freeze" restart="whenNotActive" /> 
</text>  
</svg>	  
</div>

Анимация рамки вокруг кнопки CSS

Всё тоже самое только с помощью анимации CSS

.container { 
width:100%; 
height:100% 
} 
#trace_In { 
fill:none; 
stroke:#d3d3d3; 
} 
#trace_Out { 
fill:none; 
stroke:#d3d3d3; 
} 
 
#border_In { 
fill:transparent; 
stroke:#C532D4; 
stroke-width:2; 
stroke-dasharray:745px; 
stroke-dashoffset:745px; 
 
} 
#border_In:hover { 
animation: 2s dash_In  linear forwards; 
} 
 
@keyframes dash_In { 
to {stroke-dashoffset:0; 
    stroke-width:9px;} 
} 
 
#border_Out { 
fill:transparent; 
stroke:#C532D4; 
stroke-width:2; 
stroke-dasharray:772px; 
stroke-dashoffset:772px; 
 
 
} 
#border_Out:hover { 
animation: 2s dash_Out  linear forwards; 
} 
 
@keyframes dash_Out { 
to {stroke-dashoffset:0;} 
} 
 
.txt { 
fill:#C532D4; 
text-anchor:middle; 
font-size:40px; 
filter:url(#drop-shadow); 
pointer-events:none; 
}

<div class="container"> 
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
       viewBox="0 0 358 115" preserveAspectRatio="xMinYMin meet" >    
<defs> 
    <filter id="drop-shadow" width="120%" height="120%"> 
       <feGaussianBlur in="SourceGraphic"  stdDeviation="1" result="shadow" /> 
        
      <feOffset in="shadow" dx="2" dy="1" result="shadow" /> 
            
      <feColorMatrix in="shadow" mode="matrix" values="1.6 1.7 1.8 0.1 0 0 0.1 0 0 0 0 0 1 0 0 0 0 0 1 -0.04" result="shadow" /> 
        <feBlend in="SourceGraphic"  /> 
    </filter> 
  </defs>	 
  
   <!-- Серая внутренняя рамка, трасса анимации --> 
 <path id="trace_In" d="m23.1 87.7c0.9-6.6 2.3-9.4 3.6-15.3 2.9-12.6 6-24.2 9.5-39.7 1-4.3 1.7-7.3 2.8-11.6 1.1-4.6 4.2-9 11.1-8.2 18.4 2.2 16.7 1.4 25.3 2 38.8 2.7 71.9 5.8 109.3 7.8 26.3 1.4 53.4 2.8 83 4.3 21.6 1.1 50.6 3 69.5 3.7 3.7 0.1 4.8-1.2 4.8 7.7-0.1 7.5 0 12.5 0.2 20.1 0.1 2.2 0.1 4.8 0.3 8 0.5 10.9-3 10.9-5.5 11.1-9.8 0.8-19.2 1.5-28.3 2.2-84.5 6.2-147 9.1-277 16.4-3.3 0.2-9.3-2.2-8.4-8.4z" /> 
  
 <!-- Розовая внутренняя рамка --> 
 <path id="border_In" d="m23.1 87.7c0.9-6.6 2.3-9.4 3.6-15.3 2.9-12.6 6-24.2 9.5-39.7 1-4.3 1.7-7.3 2.8-11.6 1.1-4.6 4.2-9 11.1-8.2 18.4 2.2 16.7 1.4 25.3 2 38.8 2.7 71.9 5.8 109.3 7.8 26.3 1.4 53.4 2.8 83 4.3 21.6 1.1 50.6 3 69.5 3.7 3.7 0.1 4.8-1.2 4.8 7.7-0.1 7.5 0 12.5 0.2 20.1 0.1 2.2 0.1 4.8 0.3 8 0.5 10.9-3 10.9-5.5 11.1-9.8 0.8-19.2 1.5-28.3 2.2-84.5 6.2-147 9.1-277 16.4-3.3 0.2-9.3-2.2-8.4-8.4z" > 
   <!--  <animate 
	   attributeName="stroke-dashoffset" 
	   begin="svg1.mouseover" 
	   dur="2s" 
	   values="745;0" 
	   fill="freeze" 
	   restart="whenNotActive" /> --> 
 </path>	  
 <!-- Серая внешняя рамка, трасса анимации --> 
  <path id="trace_Out" d="m18.3 89.7c2.6-12.9 5.2-22.4 7.9-33.6 2.5-10.6 4.2-20.5 7.4-31.9 1.8-6.3 5.7-15 12.2-15.3 14.1-0.7 27.9 1.5 41.9 2.2 14.3 0.7 28.5 1.3 42.8 2.2 13.5 0.9 27.1 2.2 40.6 3.1 14.7 0.9 29.4 1.4 44.1 2.2 14.4 0.8 28.8 1.7 43.2 2.6 12.1 0.8 24.1 1.9 36.2 2.6 11.3 0.7 22.7 1 34.1 1.6 2.7 0.2 5.4 0.4 8.1 0.5 4 0.2 8.7 2.7 8.6 6.5 0 1.3 0 2.6 0 3.8-0.1 12.4-0.2 22.3-0.1 35.6 0 2.6-0.4 9.7-4.5 10.3-8.2 1.1-17.9 1.2-26.9 1.7-30.4 1.9-60.8 3.8-91.2 5.7-28.2 1.8-56.5 3.6-84.7 5.2-21 1.2-41.9 2.2-62.9 3.5-13.4 0.8-26.8 1.6-40.2 2.6-8.4 0.6-17.9-4.8-16.6-11.4z" /> 
   <!-- Розовая внешняя рамка --> 
  <path id="border_Out" d="m18.3 89.7c2.6-12.9 5.2-22.4 7.9-33.6 2.5-10.6 4.2-20.5 7.4-31.9 1.8-6.3 5.7-15 12.2-15.3 14.1-0.7 27.9 1.5 41.9 2.2 14.3 0.7 28.5 1.3 42.8 2.2 13.5 0.9 27.1 2.2 40.6 3.1 14.7 0.9 29.4 1.4 44.1 2.2 14.4 0.8 28.8 1.7 43.2 2.6 12.1 0.8 24.1 1.9 36.2 2.6 11.3 0.7 22.7 1 34.1 1.6 2.7 0.2 5.4 0.4 8.1 0.5 4 0.2 8.7 2.7 8.6 6.5 0 1.3 0 2.6 0 3.8-0.1 12.4-0.2 22.3-0.1 35.6 0 2.6-0.4 9.7-4.5 10.3-8.2 1.1-17.9 1.2-26.9 1.7-30.4 1.9-60.8 3.8-91.2 5.7-28.2 1.8-56.5 3.6-84.7 5.2-21 1.2-41.9 2.2-62.9 3.5-13.4 0.8-26.8 1.6-40.2 2.6-8.4 0.6-17.9-4.8-16.6-11.4z" > 
  <!--   <animate 
	   attributeName="stroke-dashoffset" 
	   begin="svg1.mouseover" 
	   dur="2s" 
	   values="772;0" 
	   fill="freeze" 
	   restart="whenNotActive" /> --> 
 </path>	 
<text class="txt" x="179" y="65"  > В КОРЗИНУ </text>  
</svg>	  
</div>

Анимация из одной точки SVG

Длина бордюра делится на пополам и с помощью изменения параметров атрибута stroke-dasharray реализуется анимация двух рамок на встречу друг другу

 <animate
       attributeName="stroke-dasharray"
       begin="svg1.mouseover"
       dur="2s"
       values="0 372.5 0 372.5;0 0 372.5 0"
       fill="freeze"
       restart="whenNotActive" />

.container { 
width:100%; 
height:100% 
} 
#trace_In { 
fill:none; 
stroke:#d3d3d3; 
} 
#trace_Out { 
fill:none; 
stroke:#d3d3d3; 
} 
 
#border_In { 
fill:none; 
stroke:#C532D4; 
stroke-width:2; 
stroke-dasharray:0,372.5,0,372.5; 
} 
#border_Out { 
fill:none; 
stroke:#C532D4; 
stroke-width:2; 
stroke-dasharray:772px; 
stroke-dashoffset:772px; 
 
} 
 
.txt { 
fill:#C532D4; 
text-anchor:middle; 
font-size:40px; 
filter:url(#drop-shadow); 
}

<div class="container"> 
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
       viewBox="0 0 358 115" preserveAspectRatio="xMinYMin meet" >    
<defs> 
    <filter id="drop-shadow" width="120%" height="120%"> 
       <feGaussianBlur in="SourceGraphic"  stdDeviation="1" result="shadow" /> 
        
      <feOffset in="shadow" dx="2" dy="1" result="shadow" /> 
            
      <feColorMatrix in="shadow" mode="matrix" values="1.6 1.7 1.8 0.1 0 0 0.1 0 0 0 0 0 1 0 0 0 0 0 1 -0.04" result="shadow" /> 
        <feBlend in="SourceGraphic"  /> 
    </filter> 
  </defs>	 
  
   <!-- Серая внутренняя рамка, трасса анимации --> 
 <path id="trace_In" d="m23.1 87.7c0.9-6.6 2.3-9.4 3.6-15.3 2.9-12.6 6-24.2 9.5-39.7 1-4.3 1.7-7.3 2.8-11.6 1.1-4.6 4.2-9 11.1-8.2 18.4 2.2 16.7 1.4 25.3 2 38.8 2.7 71.9 5.8 109.3 7.8 26.3 1.4 53.4 2.8 83 4.3 21.6 1.1 50.6 3 69.5 3.7 3.7 0.1 4.8-1.2 4.8 7.7-0.1 7.5 0 12.5 0.2 20.1 0.1 2.2 0.1 4.8 0.3 8 0.5 10.9-3 10.9-5.5 11.1-9.8 0.8-19.2 1.5-28.3 2.2-84.5 6.2-147 9.1-277 16.4-3.3 0.2-9.3-2.2-8.4-8.4z" /> 
  
 <!-- Розовая внутренняя рамка --> 
 <path id="border_In" d="m23.1 87.7c0.9-6.6 2.3-9.4 3.6-15.3 2.9-12.6 6-24.2 9.5-39.7 1-4.3 1.7-7.3 2.8-11.6 1.1-4.6 4.2-9 11.1-8.2 18.4 2.2 16.7 1.4 25.3 2 38.8 2.7 71.9 5.8 109.3 7.8 26.3 1.4 53.4 2.8 83 4.3 21.6 1.1 50.6 3 69.5 3.7 3.7 0.1 4.8-1.2 4.8 7.7-0.1 7.5 0 12.5 0.2 20.1 0.1 2.2 0.1 4.8 0.3 8 0.5 10.9-3 10.9-5.5 11.1-9.8 0.8-19.2 1.5-28.3 2.2-84.5 6.2-147 9.1-277 16.4-3.3 0.2-9.3-2.2-8.4-8.4z" > 
     <animate 
	   attributeName="stroke-dasharray" 
	   begin="svg1.mouseover" 
	   dur="2s" 
	   values="0 372.5 0 372.5;0 0 372.5 0" 
	   fill="freeze" 
	   restart="whenNotActive" /> 
 </path>	  
 <!-- Серая внешняя рамка, трасса анимации --> 
  <path id="trace_Out" d="m18.3 89.7c2.6-12.9 5.2-22.4 7.9-33.6 2.5-10.6 4.2-20.5 7.4-31.9 1.8-6.3 5.7-15 12.2-15.3 14.1-0.7 27.9 1.5 41.9 2.2 14.3 0.7 28.5 1.3 42.8 2.2 13.5 0.9 27.1 2.2 40.6 3.1 14.7 0.9 29.4 1.4 44.1 2.2 14.4 0.8 28.8 1.7 43.2 2.6 12.1 0.8 24.1 1.9 36.2 2.6 11.3 0.7 22.7 1 34.1 1.6 2.7 0.2 5.4 0.4 8.1 0.5 4 0.2 8.7 2.7 8.6 6.5 0 1.3 0 2.6 0 3.8-0.1 12.4-0.2 22.3-0.1 35.6 0 2.6-0.4 9.7-4.5 10.3-8.2 1.1-17.9 1.2-26.9 1.7-30.4 1.9-60.8 3.8-91.2 5.7-28.2 1.8-56.5 3.6-84.7 5.2-21 1.2-41.9 2.2-62.9 3.5-13.4 0.8-26.8 1.6-40.2 2.6-8.4 0.6-17.9-4.8-16.6-11.4z" /> 
   <!-- Розовая внешняя рамка --> 
  <path id="border_Out" d="m18.3 89.7c2.6-12.9 5.2-22.4 7.9-33.6 2.5-10.6 4.2-20.5 7.4-31.9 1.8-6.3 5.7-15 12.2-15.3 14.1-0.7 27.9 1.5 41.9 2.2 14.3 0.7 28.5 1.3 42.8 2.2 13.5 0.9 27.1 2.2 40.6 3.1 14.7 0.9 29.4 1.4 44.1 2.2 14.4 0.8 28.8 1.7 43.2 2.6 12.1 0.8 24.1 1.9 36.2 2.6 11.3 0.7 22.7 1 34.1 1.6 2.7 0.2 5.4 0.4 8.1 0.5 4 0.2 8.7 2.7 8.6 6.5 0 1.3 0 2.6 0 3.8-0.1 12.4-0.2 22.3-0.1 35.6 0 2.6-0.4 9.7-4.5 10.3-8.2 1.1-17.9 1.2-26.9 1.7-30.4 1.9-60.8 3.8-91.2 5.7-28.2 1.8-56.5 3.6-84.7 5.2-21 1.2-41.9 2.2-62.9 3.5-13.4 0.8-26.8 1.6-40.2 2.6-8.4 0.6-17.9-4.8-16.6-11.4z" > 
     <animate 
	   attributeName="stroke-dashoffset" 
	   begin="svg1.mouseover" 
	   dur="2s" 
	   values="772;0" 
	   fill="freeze" 
	   restart="whenNotActive" /> 
 </path>	 
<text class="txt" x="179" y="65"  > В КОРЗИНУ </text>  
</svg>	  
</div>

Ещё вариант анимации из одной точки SVG

.container { 
width:100%; 
height:100%; 
background:#111; 
} 
#trace_In { 
fill:none; 
stroke:#828282; 
} 
#trace_Out { 
fill:none; 
stroke:#656565; 
} 
 
#border_In { 
fill:none; 
stroke:gold; 
stroke-width:2; 
stroke-dasharray:0,372.5,0,372.5; 
stroke-dashoffset:372.5; 
} 
#border_Out { 
fill:none; 
stroke:gold; 
stroke-width:2; 
stroke-dasharray:0,386,0,386; 
} 
 
.txt { 
fill:gold; 
text-anchor:middle; 
font-size:40px; 
filter:url(#drop-shadow); 
fill-opacity:0.2; 
}

<div class="container"> 
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
       viewBox="0 0 358 115" preserveAspectRatio="xMinYMin meet" >    
<defs> 
    <filter id="drop-shadow" width="120%" height="120%"> 
       <feGaussianBlur in="SourceGraphic"  stdDeviation="1" result="shadow" /> 
        
      <feOffset in="shadow" dx="2" dy="1" result="shadow" /> 
            
      <feColorMatrix in="shadow" mode="matrix" values="1.6 1.7 1.8 0.1 0 0 0.1 0 0 0 0 0 1 0 0 0 0 0 1 -0.04" result="shadow" /> 
        <feBlend in="SourceGraphic"  /> 
    </filter> 
  </defs>	 
  
   <!-- Серая внутренняя рамка, трасса анимации --> 
 <path id="trace_In" d="m23.1 87.7c0.9-6.6 2.3-9.4 3.6-15.3 2.9-12.6 6-24.2 9.5-39.7 1-4.3 1.7-7.3 2.8-11.6 1.1-4.6 4.2-9 11.1-8.2 18.4 2.2 16.7 1.4 25.3 2 38.8 2.7 71.9 5.8 109.3 7.8 26.3 1.4 53.4 2.8 83 4.3 21.6 1.1 50.6 3 69.5 3.7 3.7 0.1 4.8-1.2 4.8 7.7-0.1 7.5 0 12.5 0.2 20.1 0.1 2.2 0.1 4.8 0.3 8 0.5 10.9-3 10.9-5.5 11.1-9.8 0.8-19.2 1.5-28.3 2.2-84.5 6.2-147 9.1-277 16.4-3.3 0.2-9.3-2.2-8.4-8.4z" /> 
  
 <!-- Розовая внутренняя рамка --> 
 <path id="border_In" d="m23.1 87.7c0.9-6.6 2.3-9.4 3.6-15.3 2.9-12.6 6-24.2 9.5-39.7 1-4.3 1.7-7.3 2.8-11.6 1.1-4.6 4.2-9 11.1-8.2 18.4 2.2 16.7 1.4 25.3 2 38.8 2.7 71.9 5.8 109.3 7.8 26.3 1.4 53.4 2.8 83 4.3 21.6 1.1 50.6 3 69.5 3.7 3.7 0.1 4.8-1.2 4.8 7.7-0.1 7.5 0 12.5 0.2 20.1 0.1 2.2 0.1 4.8 0.3 8 0.5 10.9-3 10.9-5.5 11.1-9.8 0.8-19.2 1.5-28.3 2.2-84.5 6.2-147 9.1-277 16.4-3.3 0.2-9.3-2.2-8.4-8.4z" > 
     <animate 
	   attributeName="stroke-dasharray" 
	   begin="svg1.mouseover" 
	   dur="2s" 
	   values="0 372.5 0 372.5;0 0 745 0" 
	   fill="freeze" 
	   restart="whenNotActive" /> 
 </path>	  
 <!-- Серая внешняя рамка, трасса анимации --> 
  <path id="trace_Out" d="m18.3 89.7c2.6-12.9 5.2-22.4 7.9-33.6 2.5-10.6 4.2-20.5 7.4-31.9 1.8-6.3 5.7-15 12.2-15.3 14.1-0.7 27.9 1.5 41.9 2.2 14.3 0.7 28.5 1.3 42.8 2.2 13.5 0.9 27.1 2.2 40.6 3.1 14.7 0.9 29.4 1.4 44.1 2.2 14.4 0.8 28.8 1.7 43.2 2.6 12.1 0.8 24.1 1.9 36.2 2.6 11.3 0.7 22.7 1 34.1 1.6 2.7 0.2 5.4 0.4 8.1 0.5 4 0.2 8.7 2.7 8.6 6.5 0 1.3 0 2.6 0 3.8-0.1 12.4-0.2 22.3-0.1 35.6 0 2.6-0.4 9.7-4.5 10.3-8.2 1.1-17.9 1.2-26.9 1.7-30.4 1.9-60.8 3.8-91.2 5.7-28.2 1.8-56.5 3.6-84.7 5.2-21 1.2-41.9 2.2-62.9 3.5-13.4 0.8-26.8 1.6-40.2 2.6-8.4 0.6-17.9-4.8-16.6-11.4z" /> 
   <!-- Розовая внешняя рамка --> 
  <path id="border_Out" d="m18.3 89.7c2.6-12.9 5.2-22.4 7.9-33.6 2.5-10.6 4.2-20.5 7.4-31.9 1.8-6.3 5.7-15 12.2-15.3 14.1-0.7 27.9 1.5 41.9 2.2 14.3 0.7 28.5 1.3 42.8 2.2 13.5 0.9 27.1 2.2 40.6 3.1 14.7 0.9 29.4 1.4 44.1 2.2 14.4 0.8 28.8 1.7 43.2 2.6 12.1 0.8 24.1 1.9 36.2 2.6 11.3 0.7 22.7 1 34.1 1.6 2.7 0.2 5.4 0.4 8.1 0.5 4 0.2 8.7 2.7 8.6 6.5 0 1.3 0 2.6 0 3.8-0.1 12.4-0.2 22.3-0.1 35.6 0 2.6-0.4 9.7-4.5 10.3-8.2 1.1-17.9 1.2-26.9 1.7-30.4 1.9-60.8 3.8-91.2 5.7-28.2 1.8-56.5 3.6-84.7 5.2-21 1.2-41.9 2.2-62.9 3.5-13.4 0.8-26.8 1.6-40.2 2.6-8.4 0.6-17.9-4.8-16.6-11.4z" > 
     <animate 
	   attributeName="stroke-dasharray" 
	   begin="svg1.mouseover" 
	   dur="2s" 
	   values="0 386 0 386;0 0 772 0" 
	   fill="freeze" 
	   restart="whenNotActive" /> 
 </path>	 
<text class="txt" x="179" y="67"  > В КОРЗИНУ 
 <animate attributeName="fill-opacity" dur="2s" values="0.2;1" begin="svg1.mouseover"  fill="freeze" restart="whenNotActive" /> 
 </text>  
</svg>	  
</div>