wavy button shape with text inside - html

Question

I'm trying to create this button:
I'm doing this with SVG, so here is my code:
.svg-button {
position:relative;
}
a.test {
display:block;
}
<div class="svg-button">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="150px" height="51px" viewBox="0 0 150 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-HD" transform="translate(-987.000000, -779.000000)" stroke="#102CCA">
<g id="Group-6" transform="translate(836.000000, 668.000000)">
<g id="Group" transform="translate(151.000000, 111.000000)">
<path d="M0.5,0.5 L0.5,47.4475413 C38.7946588,43.6370428 73.268313,43.6553687 103.92161,47.5038947 C134.273898,51.314629 149.5,49.8747765 149.5,43.6367187 L149.5,30.078125 C149.5,19.2695184 149.5,19.0898429 149.5,0.936176488 L0.5,0.5 Z" id="Rectangle"></path>
</g>
</g>
</g>
</g>
</svg>
<a class="test" href="#">add to cart</a>
</div>
Any ideas on how I might integrate the text inside the shape and add a hover state for the shape/button?
Thanks!

Answer 1

There are a number of ways you could do it.
You could move the text into the SVG using a <text> element...
a.test:hover svg path {
fill: red;
}
<div class="svg-button">
<a class="test" href="#">
<svg width="150px" height="51px" viewBox="0 0 150 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-HD" transform="translate(-987.000000, -779.000000)" stroke="#102CCA">
<g id="Group-6" transform="translate(836.000000, 668.000000)">
<g id="Group" transform="translate(151.000000, 111.000000)">
<path d="M0.5,0.5 L0.5,47.4475413 C38.7946588,43.6370428 73.268313,43.6553687 103.92161,47.5038947 C134.273898,51.314629 149.5,49.8747765 149.5,43.6367187 L149.5,30.078125 C149.5,19.2695184 149.5,19.0898429 149.5,0.936176488 L0.5,0.5 Z" id="Rectangle"></path>
</g>
</g>
</g>
</g>
<text x="75" y="27" text-anchor="middle">add to cart</text>
</svg>
</a>
</div>
Or if you wanted to keep the text as HTML. You could use relative/absolute positioning to centre the text over the SVG.
.svg-button {
position: relative;
}
.svg-button svg,
.svg-button a {
position: absolute;
display: block;
width: 150px;
height: 51px;
top: 0;
}
.svg-button a {
text-align: center;
line-height: 45px;
}
.svg-button:hover svg path {
fill: red;
}
<div class="svg-button">
<svg width="150px" height="51px" viewBox="0 0 150 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-HD" transform="translate(-987.000000, -779.000000)" stroke="#102CCA">
<g id="Group-6" transform="translate(836.000000, 668.000000)">
<g id="Group" transform="translate(151.000000, 111.000000)">
<path d="M0.5,0.5 L0.5,47.4475413 C38.7946588,43.6370428 73.268313,43.6553687 103.92161,47.5038947 C134.273898,51.314629 149.5,49.8747765 149.5,43.6367187 L149.5,30.078125 C149.5,19.2695184 149.5,19.0898429 149.5,0.936176488 L0.5,0.5 Z" id="Rectangle"></path>
</g>
</g>
</g>
</g>
</svg>
<a class="test" href="#">add to cart</a>
</div>

Answer 2

I'd recommend grouping the svg path and the text 'add to cart' inside of the svg (with a "g" element). I'm also guessing that you want this whole button to act as the link, so I'd recommend structuring the HTML like the following:
<a>
<svg>
<g>
<path></path>
<text>Add to cart</text>
</g>
</svg>
</a>
...and positioning the path and the text inside of the group with x and y values. You can then target the path and the text, when the whole link is being hovered on like this:
a:hover svg g text {
fill: red;
}
a:hover svg g path {
stroke: red;
}
Check out this simple codepen I made for a demo and let me know if you have any questions! https://codepen.io/segheysens/pen/VzbzeJ