MogulChris/border-image.html

## border-image.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>title</title>
    <style>
        button {
            appearance: none;
            background-color: transparent;
            text-align: center;
            padding: 30px 50px;


            /*
                The image is an svg of the desired fancy button, perhaps with complicated borders including angles and gaps.
                The key rule here is border-image-slice.
                https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice
                This rule says how to divide up the image to use as a border - top, right, bottom, left
                These values will need to change depending on the image, but the idea is to slice at the appropriate points
                so your image tiles nicely in the middle section, to allow for a variable amount of button label text

            */
            border-image: url(fancy-button.svg);
            border-image-slice: 50% 20% 50% 10%;
            border-image-width: auto;
            border-image-repeat: repeat;

        }
    </style>
</head>

<body>
    <button>Click here to add more text, it can go really long if needed</button>
</body>

</html>

## fancy-button.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="289.35928"
   height="86.036873"
   viewBox="0 0 76.559643 22.763921"
   version="1.1"
   id="svg5"
   inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
   sodipodi:docname="wonk.svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <sodipodi:namedview
     id="namedview7"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:document-units="px"
     showgrid="false"
     units="px"
     inkscape:zoom="2.5620932"
     inkscape:cx="117.87237"
     inkscape:cy="68.108373"
     inkscape:window-width="1941"
     inkscape:window-height="1360"
     inkscape:window-x="-7"
     inkscape:window-y="0"
     inkscape:window-maximized="0"
     inkscape:current-layer="layer1" />
  <defs
     id="defs2">
    <inkscape:path-effect
       effect="fillet_chamfer"
       id="path-effect12161"
       is_visible="true"
       lpeversion="1"
       satellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,1,0,1 @ F,0,0,1,0,1,0,1 @ F,0,0,1,0,0,0,1"
       unit="px"
       method="auto"
       mode="F"
       radius="1"
       chamfer_steps="1"
       flexible="false"
       use_knot_distance="true"
       apply_no_radius="true"
       apply_with_radius="true"
       only_selected="false"
       hide_knots="false" />
    <inkscape:path-effect
       effect="fillet_chamfer"
       id="path-effect12161-7"
       is_visible="true"
       lpeversion="1"
       satellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,1,0,1 @ F,0,0,1,0,1,0,1 @ F,0,0,1,0,0,0,1"
       unit="px"
       method="auto"
       mode="F"
       radius="1"
       chamfer_steps="1"
       flexible="false"
       use_knot_distance="true"
       apply_no_radius="true"
       apply_with_radius="true"
       only_selected="false"
       hide_knots="false" />
  </defs>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(4.6094856,-64.153881)">
    <path
       style="fill:none;stroke:#a1dbe2;stroke-width:0.522918;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="M -0.48903475,64.425095 H 71.07961 a 0.6112712,0.6112712 58.563757 0 1 0.544028,0.889994 L 61.145782,85.766391 a 1.5903107,1.5903107 147.55348 0 1 -1.399892,0.889994"
       id="path10038"
       inkscape:path-effect="#path-effect12161"
       inkscape:original-d="M -0.48903475,64.425095 H 72.07961 l -11.3898,22.23129 h -0.94392"
       sodipodi:nodetypes="cccc" />
    <path
       style="fill:none;stroke:#a1dbe2;stroke-width:0.528998;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="M 57.832179,86.643585 H -3.3451438 a 0.99984274,0.99984274 45.004505 0 1 -0.9998427,-1 l 0.00319,-20.25499 a 0.97036409,0.97036409 135.87072 0 1 0.9997002,-0.969768 l 0.2072331,0.0063"
       id="path10038-5"
       inkscape:path-effect="#path-effect12161-7"
       inkscape:original-d="M 57.832179,86.643585 H -4.3451438 l 0.0035,-22.25499 1.206776,0.0365"
       sodipodi:nodetypes="cccc" />
  </g>
</svg>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8" />
	<title>title</title>
	<style>
	button {
	appearance: none;
	background-color: transparent;
	text-align: center;
	padding: 30px 50px;


	/*
	The image is an svg of the desired fancy button, perhaps with complicated borders including angles and gaps.
	The key rule here is border-image-slice.
	https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice
	This rule says how to divide up the image to use as a border - top, right, bottom, left
	These values will need to change depending on the image, but the idea is to slice at the appropriate points
	so your image tiles nicely in the middle section, to allow for a variable amount of button label text

	*/
	border-image: url(fancy-button.svg);
	border-image-slice: 50% 20% 50% 10%;
	border-image-width: auto;
	border-image-repeat: repeat;

	}
	</style>
	</head>

	<body>
	<button>Click here to add more text, it can go really long if needed</button>
	</body>

	</html>
	<?xml version="1.0" encoding="UTF-8" standalone="no"?>
	<!-- Created with Inkscape (http://www.inkscape.org/) -->

	<svg
	width="289.35928"
	height="86.036873"
	viewBox="0 0 76.559643 22.763921"
	version="1.1"
	id="svg5"
	inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
	sodipodi:docname="wonk.svg"
	xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
	xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
	xmlns="http://www.w3.org/2000/svg"
	xmlns:svg="http://www.w3.org/2000/svg">
	<sodipodi:namedview
	id="namedview7"
	pagecolor="#ffffff"
	bordercolor="#666666"
	borderopacity="1.0"
	inkscape:pageshadow="2"
	inkscape:pageopacity="0.0"
	inkscape:pagecheckerboard="0"
	inkscape:document-units="px"
	showgrid="false"
	units="px"
	inkscape:zoom="2.5620932"
	inkscape:cx="117.87237"
	inkscape:cy="68.108373"
	inkscape:window-width="1941"
	inkscape:window-height="1360"
	inkscape:window-x="-7"
	inkscape:window-y="0"
	inkscape:window-maximized="0"
	inkscape:current-layer="layer1" />
	<defs
	id="defs2">
	<inkscape:path-effect
	effect="fillet_chamfer"
	id="path-effect12161"
	is_visible="true"
	lpeversion="1"
	satellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,1,0,1 @ F,0,0,1,0,1,0,1 @ F,0,0,1,0,0,0,1"
	unit="px"
	method="auto"
	mode="F"
	radius="1"
	chamfer_steps="1"
	flexible="false"
	use_knot_distance="true"
	apply_no_radius="true"
	apply_with_radius="true"
	only_selected="false"
	hide_knots="false" />
	<inkscape:path-effect
	effect="fillet_chamfer"
	id="path-effect12161-7"
	is_visible="true"
	lpeversion="1"
	satellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,1,0,1 @ F,0,0,1,0,1,0,1 @ F,0,0,1,0,0,0,1"
	unit="px"
	method="auto"
	mode="F"
	radius="1"
	chamfer_steps="1"
	flexible="false"
	use_knot_distance="true"
	apply_no_radius="true"
	apply_with_radius="true"
	only_selected="false"
	hide_knots="false" />
	</defs>
	<g
	inkscape:label="Layer 1"
	inkscape:groupmode="layer"
	id="layer1"
	transform="translate(4.6094856,-64.153881)">
	<path
	style="fill:none;stroke:#a1dbe2;stroke-width:0.522918;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
	d="M -0.48903475,64.425095 H 71.07961 a 0.6112712,0.6112712 58.563757 0 1 0.544028,0.889994 L 61.145782,85.766391 a 1.5903107,1.5903107 147.55348 0 1 -1.399892,0.889994"
	id="path10038"
	inkscape:path-effect="#path-effect12161"
	inkscape:original-d="M -0.48903475,64.425095 H 72.07961 l -11.3898,22.23129 h -0.94392"
	sodipodi:nodetypes="cccc" />
	<path
	style="fill:none;stroke:#a1dbe2;stroke-width:0.528998;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
	d="M 57.832179,86.643585 H -3.3451438 a 0.99984274,0.99984274 45.004505 0 1 -0.9998427,-1 l 0.00319,-20.25499 a 0.97036409,0.97036409 135.87072 0 1 0.9997002,-0.969768 l 0.2072331,0.0063"
	id="path10038-5"
	inkscape:path-effect="#path-effect12161-7"
	inkscape:original-d="M 57.832179,86.643585 H -4.3451438 l 0.0035,-22.25499 1.206776,0.0365"
	sodipodi:nodetypes="cccc" />
	</g>
	</svg>