.text {
white-space: nowrap;
padding-left: 15px;
}
.icon {
font-family: "Font Awesome 5 Free";
font-size: 16px;
margin-left: 15px;
padding: 0px 8px;
display: flex;
align-items: center;
}
.button {
background-color: #099;
color: white;
text-decoration: none;
border-radius: 60px;
height: 32px;
display: inline-flex;
align-items: center;
overflow: hidden;
width: auto;
max-width: 32px;
-webkit-transition: max-width 0.5s;
transition: max-width 0.5s;
display: inline-flex;
flex-direction: row-reverse;
}
Solution 1 :
Solution 2 :
Wrap one more element to make it relative position and use right with absolute position to expand from the right to left.
.button {
display: inline-block;
margin: 0 0 0 400px;/* just for see is it expand to left. you can remove this line. */
position: relative;
}
.button > * {
align-items: center;
background-color: #099;
border-radius: 60px;
color: white;
display: inline-flex;
justify-content: end;
height: 32px;
overflow: hidden;
position: absolute;
right: 0;
width: auto;
text-decoration: none;
max-width: 32px;
/** I'm animating max-width because width needs to be auto, and auto can't be animated **/
-webkit-transition: max-width 0.5s;
transition: max-width 0.5s;
}
.button > *:hover {
max-width: 300px;
}
.icon {
font-family: "Font Awesome 5 Free";
font-size: 16px;
margin-right: 0;
padding: 0px 8px;
display: flex;
align-items: center;
}
.text {
white-space: nowrap;
margin-left: 15px;
padding-right: 15px;
}<span class="button">
<a href="#">
<span class="text">Hakuna Matata</span>
<span class="icon"></span>
</a>
</span>However, I don’t understand your “message to have different height, border and background from icon’ circle”. If it is different height how can it be full rounded circle (it will becomes oval).
Problem :
I want to create a button like this:
.button {
background-color: #099;
color: white;
text-decoration: none;
border-radius: 60px;
height: 32px;
display: inline-flex;
align-items: center;
overflow:hidden;
width: auto;
max-width: 32px; /** I'm animating max-width because width needs to be auto, and auto can't be animated **/
-webkit-transition: max-width 0.5s;
transition: max-width 0.5s;
}
.button:hover {
max-width: 300px;
}
.icon {
font-family: "Font Awesome 5 Free";
font-size: 16px;
margin-right: 15px;
padding: 0px 8px;
display: flex;
align-items: center;
}
.text {
white-space: nowrap;
padding-right: 15px;
}<a href="#" class="button">
<span class="icon"></span>
<span class="text">Hakuna Matata</span>
</a>But I need message to appear on left from icon. So, message is invisible by default and when button hovered – the button expands to left and message appears.
Another issue: I want message to have different height, border and background from icon’ circle.
How can I do that?
Comments
Comment posted by Dmitry
That works! Thanks! I don’t know which anwer is better: your or @vee ‘s one so I don’t know which one to mark as “the most helpfull”.
Comment posted by vee
If this answer is work as expected and answered before me, you can accept this answer. It’s no problem.
Comment posted by Ali Hamza Yaseen
both are working good . you can consider one of them which make good sense
Comment posted by Dmitry
“message to have different height, border and background from icon’ circle” means that message by itself is another element and have another height. So, it will not be an oval or circle. It will have some more complex geometry.
Comment posted by vee
Sorry, I can’t imagine that. Could you please attach the screenshot how it is? About the expand to left, does it work as you expected?