0

I've implemented an outlined button. in hover state, the button's text becomes italic. however, in hover state, the button's outline also shifts. specifically, the button's width becomes slightly smaller. See below for detailed demonstration:
enter image description here

I'd like the button size to stay the same i.e. the outlines should stay in the same place, not move. How to solve this problem? thx in advance

button {
 border-width: 1px; 
 border-color: #EEEEEE; 
 font-family: "Adobe Garamond Pro";
 font-weight: normal; 
 border-style: solid;
 color: #595959;
}

button:hover {
 font-style: italic;
}
<button id="loginbutton" type="button" title="Enter">Enter</button>
Youssouf Oumar
  • 29,373
  • 11
  • 46
  • 65
roarsandmeows
  • 17
  • 4
  • I am not too sure of the underlying issue, but adding some additional padding to the button seems to fix the issue (e.g. `padding: 0 1em;`). My polite guess is that the italic font is taking a bit more width than it's available on the buton, and since there's not enough width, it needs to increase it to fit. This does not make much sense since the padding is not part of the button text, though, but it seems to solve it. You could also increase the button width (`width: 6em;`), but I assumed you don't want to statically define that. – nitobuendia May 28 '22 at 09:27

3 Answers3

0

You can add a specific width to the button in order to solve the issue. Since default width is auto, so it will switch the width of button on the basis of the content in it. Italic font takes a bit more width that's why it is getting switched by default.

button {
 border: 1px solid #000;
 font-family: "Adobe Garamond Pro";
 font-weight: normal; 
 border-style: solid;
 color: #595959;
 width: 3rem;
}

button:hover {
 font-style: italic;
}
<button id="loginbutton" type="button" title="Enter">Enter</button>
Sumit Sharma
  • 1,192
  • 1
  • 4
  • 18
0

The problem is the italicized font is actually thinner than the standard version. The suggestion to use a fixed width is probably the cleanest way of solving the problem but may not be desirable in all cases.

Adding padding will not necessarily fix the issue.

This answer contains an interesting suggestion which you could modify for your use case: CSS: bolding some text without changing its container's size . You already have the title attribute on your button, so you could take the same approach but set the psuedo element to font-style: normal.

button {
  border-width: 1px; 
  border-color: #EEEEEE; 
  font-family: "Adobe Garamond Pro";
  font-weight: normal; 
  border-style: solid;
  color: #595959;
  font-size:30px;
  padding:0 1em;
  position:relative;
}

button:hover {
  font-style: italic;
}
button::after {
  display: block;
  content: attr(title);
  height: 0;
  font-style:normal;
  color: transparent;
  overflow: hidden;
  visibility: hidden;
}
<button id="loginbutton" type="button" title="Enter">Enter</button>
omid
  • 1,146
  • 1
  • 7
  • 17
  • Thanks! It turns out I set padding value for #loginbutton and this solution was the easiest to implement. Others solutions i.e. setting width also fixed the problem , thx everyone – roarsandmeows May 28 '22 at 11:52
0

if you use specipic width your button then it will work perfect, when you hover it will work same as before hover .. you just simply use specipic width.. here are my code hope it will help you

button {
  border-width: 1px solid; 
/*    border-color: #EEEEEE;  */
  border-color: #000; 
  font-family: "Adobe Garamond Pro";
  font-weight: normal; 
  border-style: solid;
  color: #595959;
  width : 50px;
  display: inline-block;
}

button:hover {
  font-style: italic;
}



<button id="loginbutton" type="button" title="Enter">Enter</button>

and you can aslo remove hover style italic.. just comment or delete your hover css then it will work

iqbal hossain
  • 103
  • 5