feat(stellungnahme): Button subtiles Wiggle-Rotate statt bounce
This commit is contained in:
@@ -895,7 +895,7 @@ ${"=".repeat(64)}`;
|
|||||||
|
|
||||||
<div class="mb-2 flex gap-3">
|
<div class="mb-2 flex gap-3">
|
||||||
<button class="rounded-lg border border-stein-300 px-4 py-2 text-sm text-stein-600 hover:bg-stein-50" onclick={() => goTo(3)}>← Zurück</button>
|
<button class="rounded-lg border border-stein-300 px-4 py-2 text-sm text-stein-600 hover:bg-stein-50" onclick={() => goTo(3)}>← Zurück</button>
|
||||||
<button
|
<button
|
||||||
class="btn-wiggle rounded-lg bg-wald-700 px-6 py-2.5 font-semibold text-white transition hover:bg-wald-800 disabled:opacity-40"
|
class="btn-wiggle rounded-lg bg-wald-700 px-6 py-2.5 font-semibold text-white transition hover:bg-wald-800 disabled:opacity-40"
|
||||||
disabled={!absenderName.trim()}
|
disabled={!absenderName.trim()}
|
||||||
onclick={generateOutput}
|
onclick={generateOutput}
|
||||||
@@ -963,3 +963,19 @@ ${"=".repeat(64)}`;
|
|||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(0deg); }
|
||||||
|
20% { transform: rotate(-2deg); }
|
||||||
|
40% { transform: rotate(2deg); }
|
||||||
|
60% { transform: rotate(-1.5deg); }
|
||||||
|
80% { transform: rotate(1.5deg); }
|
||||||
|
}
|
||||||
|
.btn-wiggle {
|
||||||
|
animation: wiggle 2.4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.btn-wiggle:hover {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user