How to adaptively lay out a button with complex decorative elements on an arbitrary background?

Question

css

How to make such a button with complex decorative elements and make it adaptive? On mobile, the button's width is reduced to 345px and the top border line should decrease in proportion to the width.
The background will be arbitrary. Top and bottom elements are in svg/png

Answer 1

https://codepen.io/aliencash/pen/mdqrORo

Answer 2

Well, I think that everything is very simple here, the back line is in fact a clone of the button, only with a white fill, we make it through before, and give a width of 90%, respectively, it will automatically decrease relative to the main button, for the top svg element we can also wrap it in a div, and give it a white background to overlap the line, or an even simpler option is to just pull it into jpg, where this white background will already be, but the bottom svg does not pose any problems at all, I think I could make this button in ~5 minutes