Hässliche weiße Pixel innerhalb der Schaltfläche ⇐ HTML

[Anonymous]

Schaltfläche:

Code: Select all

Button

Stil:

Code: Select all

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer {
.btn {
@apply relative flex min-w-[150px] justify-center overflow-hidden
rounded-full border-2 border-green-800 bg-transparent py-4
outline-none hover:bg-transparent;
}
.btn--bg {

@apply absolute left-0 top-0 -z-[10] box-border h-full w-full rounded-full border outline-none;
}

.green {
@apply border-green-600 bg-green-600 hover:border-green-600 hover:bg-white hover:text-green-600;
}
* {
box-sizing: border-box;
}
}

Problem:
https://play.tailwindcss.com/ZN4HTmjljB


Wie kann ich diese weißen Pixel entfernen?