2

Добрый день. Как можно так заверстать?

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

0

3 ответа 3

9

Решение 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>   

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

введите сюда описание изображения

  1. С помощью инструмента - Редактировать узлы контура на рис. (2) выделяете эти узлы - они должны окраситься в жёлтый цвет

  2. Делаете их автоматически сглаженными (3) и рычагами управления узлов, добиваетесь нужной формы кривой.

  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>

2
  • зачем атрибут in ?
    – Leks
    7 янв 2020 в 19:51
  • @Leks Теорию фильтров можно почитать для ознакомления w3.org/TR/filter-effects 7 янв 2020 в 19:54
7

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

это если без 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>

14
  • Тоже неплохой вариант. Я вообще немного неправильно составил вопрос, как именно таких срезов добиться? бордери бла-бла я то сделал. А вот как с обрезкой хз. Думал с помощью clip-path но немного не то получается.
    – Taras
    6 янв 2020 в 4:53
  • @Taras о каких срезах речь ? 6 янв 2020 в 4:55
  • Я про нестандартную форму. Более узкая справа и боле широкая в левою крае.
    – Taras
    6 янв 2020 в 5:32
  • @Taras это на svg делается, я просто показал на css - хотите научу ...там что угодно можно нарисовать 6 янв 2020 в 5:35
  • Если можете показать/дать совет/научить буду крайне благодарен)
    – Taras
    6 янв 2020 в 5:36
5

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

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

Добавляем дополнительные серые рамки, которые будут служить для показа трассы анимации розовых рамок Просто копируем 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.