Scale font-size on hover inside a container while keeping container dimensions, without forcing a wi-CodePudding

I have tried to make a button class that will make a hover effect of just scaling up the font-size. Sadly it came with all kinds of side effect that I did not want.

I want to take the hover effect from button-2 (the 'Text' and 'Short Text' button - I don't want the collapsing on multiple lines neither inside the button nor when it is hovered that happens with the 3 other buttons) and put it inside button-1. So that ONLY the font-size scales up when it's hovered and nothing else.
But button-1 should still work like button-1 does when it is NOT hovered. So that it fits the text inside it regardless or the font-size or font-weight or how long the text is.

Codeply code example

/* The button I want - However, it don't have the effect I want so ONLY the font-size change on hover and NOTHING else */
.button-1{
    display: flex;
    border: solid 2.5px red;
    color: red;
    padding: 1rem;
    margin-right: 1rem;
    font-size: 1rem;
    transition: font-size 0.25s 0s;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    align-items: center;
}

/* The effect I want - However, it doesn't have the button i want when it is not hovered where it fits the content dynamically. */
.button-2{
    display: flex;
    border: solid 2.5px red;
    color: red;
    padding: 1rem;
    margin-right: 1rem;
    font-size: 1rem;
    transition: font-size 0.25s 0s;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    align-items: center;
    height: 2rem; /* Only thing new added to button 2 */
    width: 10rem; /* Only thing new added to button 2 */
    justify-content: center; /* Only thing new added to button 2 */
}

.button-1:hover, .button-2:hover{
    font-size: 2rem;
}

li{
    list-style: none;
}

ul{
    display: flex
}

nav{
    padding: 1rem;
}

<nav>
 <p>The buttons I want - but NOT the hover effect I want. I ONLY want the font-size to change on hover and NOTHING else. <br>
 Right now it scales the whole button   font-size and mess with the layout of the other buttons</p>
 <ul>
  <li><a  href="">Text</a></li> <!-- The button I want that always fit the content regardless of the text size and with 1rem in padding --> 
  <li><a  href="">Short Text</a></li>
  <li><a  href="">Medium Sized Button Text</a></li>
  <li><a  href="">Large Sized Button Text Just For Show</a></li>
  <li><a  href="">Very Long Text To Show How It Always Fit Content</a></li>
 </ul>
</nav>
<nav>
 <p>The hover effect I want (only on the 'text' and 'short text' button the last 3 is also not the effect I want).<br>
 But now the buttons doesn't fit the content dynamically regardless of the length of the text as above when it is not hovered</p>
 <ul>
  <li><a  href="">Text</a></li>
  <li><a  href="">Short Text</a></li>
  <li><a  href="">Medium Sized Button Text</a></li>
  <li><a  href="">Large Sized Button Text Just For Show</a></li>
  <li><a  href="">Very Long Text To Show How It Always Fit Content</a></li>
 </ul>
</nav>

Simply put, I want button 1 (not the hover effect from button 1) with the font-size increase hover effect from button 2 (the first 2 button examples). Preferably just as 1 class inside 1 HTML tag, but if it is not possible that way, but can be done another way to make it do what I want, that is all that really matters.

I don't know if it is possible, or there is workaround or some crazy calc() stuff you can do where depending on the font-size the text content, it sets height and width of every button.

CodePudding user response：

I've altered button-1 to scale the whole button up, as you mentioned in your comment, that's not right. So I added button-3 to show how you can achieve that affect, but you have to add another element within the anchors (in this case, a span). Then you just add the scale transform function to the span rather than the anchor.

Note that the initial class for the button doesn't set the width and height or anything like that. You might need to adjust the padding if you want the text to not scale outside of the box.

/* The button I want - However, it don't have the effect I want so ONLY the font-size change on hover and NOTHING else */

.button-1 {
  display: flex;
  border: solid 2.5px red;
  color: red;
  padding: 1rem;
  margin-right: 1rem;
  font-size: 1rem;
  transition: transform 0.25s 0s; /* Changed from font-size to transform */
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  align-items: center;
  transform: scale(1); /* added scale(1) for non-hover state */
}


/* The effect I want - However, it doesn't have the button i want when it is not hovered where it fits the content dynamically. */

.button-2 {
  display: flex;
  border: solid 2.5px red;
  color: red;
  padding: 1rem;
  margin-right: 1rem;
  font-size: 1rem;
  transition: font-size 0.25s 0s;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  align-items: center;
  height: 2rem;
  /* Only thing new added to button 2 */
  width: 10rem;
  /* Only thing new added to button 2 */
  justify-content: center;
  /* Only thing new added to button 2 */
}

.button-3 {
  display: flex;
  border: solid 2.5px red;
  color: red;
  padding: 1rem;
  margin-right: 1rem;
  font-size: 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  align-items: center;
}

/* added span rule to get scale and origin */
.button-3 span {
  transition: transform 0.25s 0s; 
  transform: scale(1); 
  transform-origin: center;
}

.button-1:hover {
  transform: scale(1.5); /* split .button-1:hover out and increased scale value for hover state */
}

.button-2:hover {
  font-size: 2rem;
}

/* Then add a :hover for the span... */
.button-3:hover span {
  transform: scale(1.5);
}

li {
  list-style: none;
}

ul {
  display: flex
}

nav {
  padding: 1rem;
}

<nav>
  <p>The buttons I want - but NOT the hover effect I want. I ONLY want the font-size to change on hover and NOTHING else. <br> Right now it scales the whole button   font-size and mess with the layout of the other buttons</p>
  <ul>
    <li><a  href="">Text</a></li>
    <!-- The button I want that always fit the content regardless of the text size and with 1rem in padding -->
    <li><a  href="">Short Text</a></li>
    <li><a  href="">Medium Sized Button Text</a></li>
    <li><a  href="">Large Sized Button Text Just For Show</a></li>
    <li><a  href="">Very Long Text To Show How It Always Fit Content</a></li>
  </ul>
</nav>
<nav>
  <p>The hover effect I want (only on the 'text' and 'short text' button the last 3 is also not the effect I want).<br> But now the buttons doesn't fit the content dynamically regardless of the length of the text as above when it is not hovered</p>
  <ul>
    <li><a  href="">Text</a></li>
    <li><a  href="">Short Text</a></li>
    <li><a  href="">Medium Sized Button Text</a></li>
    <li><a  href="">Large Sized Button Text Just For Show</a></li>
    <li><a  href="">Very Long Text To Show How It Always Fit Content</a></li>
  </ul>
</nav>
<nav>
  <p>The hover effect I want (only on the 'text' and 'short text' button the last 3 is also not the effect I want).<br> But now the buttons doesn't fit the content dynamically regardless of the length of the text as above when it is not hovered</p>
  <ul>
    <li><a  href=""><span>Text</span></a></li>
    <li><a  href=""><span>Short Text</span></a></li>
    <li><a  href=""><span>Medium Sized Button Text</span></a></li>
    <li><a  href=""><span>Large Sized Button Text Just For Show</span></a></li>
    <li><a  href=""><span>Very Long Text To Show How It Always Fit Content</span></a></li>
  </ul>
</nav>