Градиент закругленного бордюра кнопки

#html #css #svg #less

Как сделать градиент закругленного бордюра кнопки с прозрачным содержимым?



К примеру, в простом варианте — нет возможности задать градиент для border-bottom,
border-top



   
      
   
   
      

   





Идеальный вариант, теоретически можно с помощью clip-path осуществить заливку середины
маской с прозрачностью и выставить отступы от краев, но на данный момент — код работает
наоборот и нужно инвертировать маску.






  
  


  

    






Пробовал вариант с SVG - он растягивается сильно, даже при применение атрибута non-scaling-stroke
и preserveAspectRatio 


  https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

    

Ответы

Ответ 1

Добавление анимации

Берется соседний цвет градиента по точкам offset   

values="violet;blue;violet"   


Анимируется атрибут линейного градиента stop-color  


   
   
       

и так для каждой точки offset   



.container {
  width: 50%;
  height: 50%;
}

  





Добавим анимацию для текста кнопки.  

Для этого просто используем уже созданный градиент с анимацией к тексту   

Click me  




.container {
  width: 50%;
  height: 50%;
}

  



Ответ 2

В вашем примере я не увидел реализацию на svg а хотелось бы увидеть что не получилось 

Так же в вашем примере есть clip-path который поддерживается но не везде, от пример
реализации прямоугольника с закруглёнными углами и с градиентной заливкой stroke