Hover effect

How I can make smooth width ransition to review the icon on hover?

3 Replies

Mannix•7d ago

with the transition property ??

Personal I would avoid changing the width of the button as that may well cause other things to shift around. In this case I would initially center the text and hide the icon with opacity and some horizontal translate. On hover (and focus) I would then reposition the text and reveal the icon, something like this.

bockster6669OP•7d ago

good statement yes, but I am looking for a way of reviewing the icon on hover and changing the width of the button. Actually I have manage to do this type of style on my other button, which first shows icon and on hover it reviews its text, but I managed to did it, because I knew the width and height of my icon and I just set the width and height on my button to not be bigger than the icon initially, but I don't know how to make the same when firstly I want to show text and on hover the icon. Example: Here is icon first and then button

 <button
      className="min-w-[52px] max-w-[52px] hover:max-w-[200px] flex items-center justify-end p-3 group transition-all gap-3 overflow-hidden"
    >
      <span className="shrink-0 group-hover:opacity-100 text-xl">
        Back To Top
      </span>
      <ChevronUp width={28} height={28} className="shrink-0" />
    </button>

 <button
      className="min-w-[52px] max-w-[52px] hover:max-w-[200px] flex items-center justify-end p-3 group transition-all gap-3 overflow-hidden"
    >
      <span className="shrink-0 group-hover:opacity-100 text-xl">
        Back To Top
      </span>
      <ChevronUp width={28} height={28} className="shrink-0" />
    </button>

the only solution I can come with is to get the boundingBox of the text and set the button's size to this bouding box, but I hope there is a css way to do this

Gaming

Programming

Hover effect

Did you find this page helpful?