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="#" >
<span ></span>
<span >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?
CodePudding user response:
.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;
}
CodePudding user response:
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;
direction: rtl;
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;
direction: ltr;
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 >
<a href="#">
<span >Hakuna Matata</span>
<span ></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).