CODEWITHSUNDEEP
cssbuttoncss-transitions
Alejandro Garcia Anglada
Alejandro Garcia Anglada

Reputation: 2403

button width css transition doesn't work

I'm having a issue with a transition css property in a button tag.

When I hover the button I supposed it will go smoothly to width:auto, but it jump directly.

This is the code, what did I miss?

<button>Hello</button>

button {
   padding: 10px;
   width: 30px;
   overflow:hidden;
   transition: width 400ms ease-in-out;
   -webkit-transition: width 400ms ease-in-out;
   -moz-transition: width 400ms ease-in-out;
}

button:hover {
   width: auto;
}

Upvotes: 3

Views: 6912

Answers (2)

Popnoodles
Popnoodles

Reputation: 28409

max-width is your friend

Demo

button {
   padding: 10px;
   width: auto;
   max-width: 30px;
   overflow:hidden;
   transition: max-width 400ms ease-in-out;
   -webkit-transition: max-width 400ms ease-in-out;
   -moz-transition: max-width 400ms ease-in-out;
}

button:hover {
   max-width: 100%;
}

Upvotes: 2

Joaqu&#237;n O
Joaqu&#237;n O

Reputation: 1451

Transition won't work with width: auto; you have to give a value in px, ems, percentage or whatever...

Upvotes: 1

Related Questions