Beispiel:Shape-Morphing-5.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bewertungsbutton mit Shape-Morphing</title> <style>
.rate-button, .play-button {
display: inline-flex; align-items: center; gap: .6em;
margin-inline: 1em;
padding: .5em 1em; border: 0; border-radius: 2em; background: #333; color: white; cursor: pointer; transition: all 1s;
}
.icon {
width: 1.3em;
display: inline-block;
aspect-ratio: 1; transform-origin:center; transition: all 1s;
}
button .label { width: 5em;} .rate-button .icon {
background: gold;
clip-path:polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% ); }
.rate-button.done .icon{
background: lime; clip-path: polygon( 55% 31.4%, 73.7% 0%, 96.1% 15.7%, 70.9% 56.8%, 59.3% 75.5%, 44.4% 100%, 23.1% 84.6%, 0% 67.5%, 11.8% 46.8%, 35.6% 63% );
}
.rate-button:hover, .rate-button:focus { .icon { rotate: 1turn; } }
.play-button .icon {
background: red; clip-path: polygon( 10% 10%, 35% 25%, 70% 50%, 35% 75%, 10% 90%, 10% 70%, 10% 50%, 10% 20% );
}
.play-button.done .icon {
background: currentColor;
clip-path: polygon(
10% 5%, 35% 5%, 35% 94%, 65% 94%, 65% 5%, 90% 5%, 90% 95%, 10% 95%
); }
button {font-size: 2rem;}
</style>
<script> document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll("button").forEach(button => {
button.addEventListener("click", () => {
const pressed = button.classList.toggle("done");
button.setAttribute("aria-pressed", pressed);
button.querySelector(".label").textContent =
pressed ? button.dataset.on : button.dataset.off;
});
});
});
</script>
</head> <body>
<button class="rate-button"
type="button"
aria-pressed="false"
data-on="Danke!"
data-off="Bewerten!">
Bewerten!
</button>
<button class="play-button"
type="button"
aria-pressed="false"
data-on="Pause"
data-off="Abspielen">
Abspielen
</button>
</body> </html>
