I have a website with a carousel sliders library. The thing is, each slider has a button circle-shaped with border radius and when I click one button I assign it the 'active' class, so when is active I make the button bigger. But I want to change it's shape too, to make it look like a star. I thought that putting an svg with clipPath would make the trick, but I didn't work. If anyone could tell me how to make it change it's shape, if it's any library or something, it would help me a lot.

Here's what I tried:

<button>
    <svg class="star2svg">
        <defs>
            <clipPath id="clipStar">
                <path class="star2" id="star2" d="M325.07,30.69l80.91,163.95l180.93,26.29c18.09,2.63,25.31,24.86,12.22,37.62L468.22,386.16l30.91,180.2
                c3.09,18.02-15.82,31.76-32,23.25l-161.83-85.08l-161.83,85.08c-16.18,8.51-35.09-5.23-32-23.25l30.91-180.2L11.45,258.55
                c-13.09-12.76-5.87-34.99,12.22-37.62l180.93-26.29l80.91-163.95C293.61,14.3,316.98,14.3,325.07,30.69z"/>
            </clipPath>
        </defs>
    </svg>
</button>

And wanted to style it this way:

button {
    width: 0.8em;
    height: 0.8em;
    border: none;
    border-radius: 50%;
    transition: 0.2s ease-out;
    position: relative;
    clip-path: url('#clipStar');

    .star2svg {
        position: absolute;
        left: 0;
        right: 0;
        display: block;
        width: 100%;
        height: 100%;
    }
}