How do I set a different background color on hover for the arrows?

[seba-aguila]

I'm trying to change the background color when I hover the arrows. I made a custom icon, but seems like the arrow wrapper has padding, so when I set the background color, it keeps a border with the default color white and inside applies the color I choose. This is my code:

function CustomIconLeft() {
  return (
    <button className='w-full h-full rounded-full hover:bg-gray-100'>
      {'<'}
    </button>
  )
}

I used fixed widths and heights but seems like the width only gets to the max the wrapper allows within that padding it is applying:

Hope you can help me.