css width transition on hover over a link - html

Question

i have a problem to use transition on a styled anchor.
it should expand to a higher width and show a glyphicon. i tried it width max-width but i think i miss something. the glyphicon works but not the "animated" width.
html:
<a class="link" href="/"> Order <a/>
css:
a.link {
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
text-align: center;
padding: 10px 15px;
transition: max-width 1000ms ease-in-out;
-webkit-transition: max-width 1000ms ease-in-out;
-moz-transition: max-width 1000ms ease-in-out;
}
a.link:hover {
padding: 10px 40px;
max-width: 100%;
}
a.link:hover:after {
font-family: icomoon;
content: "\e903";
color: #ffffff;
font-size: 20px;
}
https://jsfiddle.net/Lg7kutpp/

Answer 1

Your code is not working, because it has no working width. It's changing size because of the padding, and therefore the transition:max-width will not work.
Easy way to fix with your code is to add transition:all.
Check this:
a.link {
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
text-align: center;
padding: 10px 15px;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
a.link:hover {
padding: 10px 40px;
max-width: 100%;
}
a.link:hover:after {
font-family: icomoon;
content: "\e903";
color: #ffffff;
font-size: 20px;
}
<a class="link">Order></a>
I you just want to go with the transition only for the width property, you should add display:inline-block and a width property to the anchor class.
a.link {
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
width: 100px;
display: inline-block;
text-align: center;
padding: 10px 15px;
transition: width 1s ease-in-out;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
}
a.link:hover {
padding: 10px 40px;
width: 150px;
}
a.link:hover:after {
font-family: icomoon;
content: "\e903";
color: #ffffff;
font-size: 20px;
}
<a class="link">Order</a>

Answer 2

a.link {
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
text-align: center;
padding: 10px 15px;
}
a.link:hover {
padding: 10px 40px;
max-width: 100%;
transition: 1000ms ease-in-out;
-webkit-transition:1000ms ease-in-out;
-moz-transition:1000ms ease-in-out;
}
a.link:hover:after {
font-family: icomoon;
content: "\e903";
color: #ffffff;
font-size: 20px;
}
You should add the transition on the hover selector without max-width
https://jsfiddle.net/Lg7kutpp/1/

Answer 3

I believe you need to set max-width to something less than 100% in a.link.
What you're currently doing is setting max-width to 100% on hover, but the default setting of max-width is already 100%.
Either set max-width to something less than 100% under a.link, or set max-width to something greater than 100% under a.link:hover.
When it comes to the transition-property, you might as well write transition: all 1000ms ease-in-out rather than transition: max-width 1000ms ease-in-out, as using all will make sure that any animation on a.link will have the same properties.
Also, I'd recommend you don't use href="/" unless you intend to direct the user to the main page. If you just want an anchor that doesn't link anywhere, you can drop using href.
Hope this helps.