Compare commits
No commits in common. "fe32a5769e51a8a9d120b8d03b86d44905ee653f" and "7ef492df123ef039754611c70ca047f706ce9504" have entirely different histories.
fe32a5769e
...
7ef492df12
BIN
button-large.png
Executable file
BIN
button-large.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
button-long.png
Executable file
BIN
button-long.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
button-med.png
Executable file
BIN
button-med.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
button-small.png
Executable file
BIN
button-small.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
BIN
button-wide.png
Executable file
BIN
button-wide.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
26
buttontest.html
Normal file
26
buttontest.html
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
background: url('main-button.svg');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
border: none;
|
||||||
|
margin: 2px;
|
||||||
|
}
|
||||||
|
path { stroke-width: 2; }
|
||||||
|
.btn1 { width: 50px; height: 50px; }
|
||||||
|
.btn2 { width: 100px; height: 50px; }
|
||||||
|
.btn3 { width: 150px; height: 100px; }
|
||||||
|
.btn4 { width: 100px; height: 200px; }
|
||||||
|
.btn5 { width: 50px; height: 150px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<button class='btn1'>Button 1</button>
|
||||||
|
<button class='btn2'>Button 2</button><br>
|
||||||
|
<button class='btn3'>Button 3</button><br>
|
||||||
|
<button class='btn4'>Button 4</button>
|
||||||
|
<button class='btn5'>Button 5</button><br>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
175
main-button.svg
Normal file
175
main-button.svg
Normal file
|
|
@ -0,0 +1,175 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
preserveAspectRatio="none"
|
||||||
|
viewBox="0 0 8.4666662 8.4666662"
|
||||||
|
version="1.1"
|
||||||
|
id="svg5"
|
||||||
|
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||||
|
sodipodi:docname="main-button.svg"
|
||||||
|
shape-rendering="crispEdges"
|
||||||
|
width="8.4666662"
|
||||||
|
height="8.4666662"
|
||||||
|
enable-background="new 0 0 798 600"
|
||||||
|
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="true"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
showgrid="false"
|
||||||
|
width="64px"
|
||||||
|
units="mm"
|
||||||
|
borderlayer="false"
|
||||||
|
inkscape:zoom="32"
|
||||||
|
inkscape:cx="4.453125"
|
||||||
|
inkscape:cy="1.40625"
|
||||||
|
inkscape:window-width="1914"
|
||||||
|
inkscape:window-height="1005"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
viewbox-width="8.46667"
|
||||||
|
inkscape:showpageshadow="true"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
showborder="true"
|
||||||
|
shape-rendering="crispEdges" />
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-1.681,-1.681)">
|
||||||
|
<g
|
||||||
|
id="g24532"
|
||||||
|
transform="translate(1.681,1.681)">
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#ececec;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 0.26458333,0.1322915 H 0.52916664"
|
||||||
|
id="path970" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#e6e6e6;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 0,0.1322915 H 0.2645833"
|
||||||
|
id="path970-5" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#e6e6e6;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 0.26458333,0.39687483 h 0.2645833"
|
||||||
|
id="path970-5-6" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#8c8c8c;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 0.13229166,0.52916662 V 0.26458332"
|
||||||
|
id="path970-3-3"
|
||||||
|
sodipodi:nodetypes="cc" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="g32358"
|
||||||
|
transform="translate(1.681,1.681)"
|
||||||
|
vector-effect="non-scaling-stroke">
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#d4d4d4;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 7.9375,0.39687483 H 8.2020832"
|
||||||
|
id="path970-5-6-1" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#d4d4d4;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 8.2020833,0.1322915 H 8.4666665"
|
||||||
|
id="path970-5-6-1-2" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#ececec;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 7.9375,0.1322915 H 8.2020834"
|
||||||
|
id="path970-3" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#bfbfbf;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 8.3343751,0.52916666 V 0.26458334"
|
||||||
|
id="path970-3-3-5-2-9"
|
||||||
|
sodipodi:nodetypes="cc" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="g32364"
|
||||||
|
transform="translate(1.681,1.681)"
|
||||||
|
vector-effect="non-scaling-stroke">
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#c9c9c9;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 7.9375,8.0697915 H 8.2020833"
|
||||||
|
id="path970-5-7-9" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#c9c9c9;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 8.2020833,8.3343748 H 8.4666666"
|
||||||
|
id="path970-5-7-9-3" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#bfbfbf;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 8.3343748,8.2020834 V 7.9375"
|
||||||
|
id="path970-3-3-5-2"
|
||||||
|
sodipodi:nodetypes="cc" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#d1d1d1;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 7.9375,8.334375 H 8.2020834"
|
||||||
|
id="path970-3-6-7" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="g29320"
|
||||||
|
transform="translate(1.681,1.681)"
|
||||||
|
vector-effect="non-scaling-stroke">
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#b3b3b3;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 0,8.3343748 H 0.2645833"
|
||||||
|
id="path970-5-7" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#b3b3b3;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 0.26458333,8.0697915 h 0.2645833"
|
||||||
|
id="path970-5-7-0" />
|
||||||
|
<path
|
||||||
|
style="fill:#8c8c8c;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 0,7.9375 H 0.26458333 V 8.2020833 H 0 Z"
|
||||||
|
id="path22779-6-0"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
<path
|
||||||
|
style="fill:#d1d1d1;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 0.26458333,8.2020833 H 0.52916666 V 8.4666666 H 0.26458333 Z"
|
||||||
|
id="path22779-6-0-2"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
</g>
|
||||||
|
<path
|
||||||
|
style="fill:#d4d4d4;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 2.21,2.2101667 H 9.618 V 9.6185001 H 2.21 Z"
|
||||||
|
id="path22779"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
<path
|
||||||
|
style="fill:#8c8c8c;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 1.681,2.2101667 H 2.2101666 V 9.6185 H 1.681 Z"
|
||||||
|
id="path22779-6"
|
||||||
|
sodipodi:nodetypes="ccccc"
|
||||||
|
vector-effect="non-scaling-stroke" />
|
||||||
|
<path
|
||||||
|
style="fill:#bfbfbf;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 9.6185,2.2101667 h 0.529166 v 7.408333 H 9.6185 Z"
|
||||||
|
id="path22779-6-1"
|
||||||
|
sodipodi:nodetypes="ccccc"
|
||||||
|
vector-effect="non-scaling-stroke" />
|
||||||
|
<path
|
||||||
|
style="fill:#d1d1d1;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 2.2101667,9.6185 h 7.4083335 v 0.529166 H 2.2101667 Z"
|
||||||
|
id="path22779-6-6"
|
||||||
|
sodipodi:nodetypes="ccccc"
|
||||||
|
vector-effect="non-scaling-stroke" />
|
||||||
|
<path
|
||||||
|
style="fill:#ececec;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 2.2101667,1.681 H 9.6185002 V 2.210166 H 2.2101667 Z"
|
||||||
|
id="path22779-6-6-8"
|
||||||
|
sodipodi:nodetypes="ccccc"
|
||||||
|
vector-effect="non-scaling-stroke" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="webslicer-layer"
|
||||||
|
inkscape:label="Web Slicer"
|
||||||
|
inkscape:groupmode="layer" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 7.9 KiB |
Loading…
Reference in New Issue
Block a user