Search code examples
csstailwind-csstailwind-3

ugly white pixels inside of button

Button:

<div class="p-8">
  <button class="btn green group border-none ring-2 ring-green-600 
                 bg-transparent border-transparent py-2">
    Button
    <div class="btn--bg green border border-green-600 transition-all 
                group-hover:translate-y-full group-hover:opacity-0"></div>
  </button>
</body>

style:

@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

enter image description here

How I can remove these white pixels?

Solution

  • Thanks to @Anton comment. Fixed with pseudo-element:

    HTML:

    <div class="p-8">
  <button class="chbtn group green" >
    Button
    <div class="chbtn--bg group-hover:translate-y-full transition-all green"></div>
  </button>
</body>

    CSS:

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

.green {
  @apply bg-green-600 after:border-green-600;
}

.chbtn {
  @apply relative flex min-w-[150px] justify-center overflow-hidden rounded-full bg-transparent px-4 py-2;
  @apply after:absolute after:left-0 after:top-0 after:-z-[1] after:h-full after:w-full after:rounded-full after:border-2 after:bg-transparent;
}
.chbtn--bg {
  @apply absolute left-0 top-0 -z-[1] h-full w-full rounded-full;
}

    UPDATE

    According to the @Rob comment, the problem is solved when I change the button to a tag or other tags.