Question 302043 in CSS Question posted in
Some basic documentation can be found here.

Css – How to keep the size of the button the same regarding the font-size is change during transition?

How to change font-size inside a button without changing the side of a button and without provoking changes in the nav?

As you can see in this website the question mark changes, but I need that to change alone. The nav or section and the button must not change.

    nav {
    text-align: center;
    padding: 10px;
    display: block;
}
    button {
            height: 70px;
            width: 70px;
            background-color: #AAAAAA;
            border: .5px solid crimson;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 0 30px 0 crimson,
                        0 0 30px 0 crimson,
                        0 0 10px 0 crimson inset;
            margin: 10px;
          }
    
    .links{
        background-color: rgb(51, 51, 51);
        margin: 10px;
    
    }
    
    #shark{
        color:#FFFFFF;
        background-color: black;
        border-radius: 25%;
        transition-property: border-radius,border,color;
        transition-duration: .1s;
        transition-timing-function: .1s;
        transition-delay: .3s;
        margin: 10px;
    }
    #shark:hover{
        border-color: orange;
        color: orange;
    
    }
    
    #bshark{
        width: 100px !important;
        height: 20px !important;
        line-height: 0px;
        color:#AAAAAA;
        background-color: black;
        border-radius: 25%;
        box-shadow: none;
        transition-property: border-radius,border,color;
        transition-duration: .1s;
        transition-timing-function: .1s;
        transition-delay: .3s;
    
    }
    
    #bshark:hover{
        border-color: orange;
        color: orange;
    
    }
    #cshark{
        width: 100px !important;
        height: 20px !important;
        line-height: 0px;
        padding: 20px;
        color:#AAAAAA;
        background-color: black;
        border-radius: 25%;
        box-shadow: none;
        transition-property: border-radius,border,color,font-size;
        transition-duration: .1s;
        transition-timing-function: .1s;
        transition-delay: .3s;
    
    }
    
    #cshark:hover{
        border-color: green;
        color: green;
        font-size: 20px;
        padding: 20px;
        width: 100px !important;
        height: 20px !important;
    
    }

If you want to visualize the problem that I’m talking about you can visit this website.

Thank you all for answering my questions not matter the silly they are.

Tags:

4

Answers


  1. 0

    Try adding these four properties to your .links selector:

        .links {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      ...existing
    }

    https://jsfiddle.net/uberrobert/kj8zobqd/6/

    If necessary, you can adjust your button selector horizontal margins if you need exact spacing to sync w/your existing layout (e.g. margin: 10px 18px;) . Hope that helps!

    Login or Signup to reply.
  2. 0

    To keep the size of a button consistent during a font-size transition, you can use the transform property instead of directly animating the font-size property. By applying a scale transformation to the button, the size will appear consistent even if the font size changes.

    button {
  transition: transform 0.3s ease;
}

 button:hover {
  transform: scale(1.1);
}

    In this example, the transition property is set on the button to specify the duration (0.3s) and easing function (ease) for the transformation. The transform property is then used to scale the button by applying the scale transformation. In the :hover state, the button is scaled to 1.1 times its original size.

    By animating the transform property, the button will maintain its original dimensions, and any changes in font size will not affect the button’s size during the transition.

    Login or Signup to reply.
  3. 0

    Try to add this to the end of #bshark if this is your wanted behaviour

    line-height: 20px;
vertical-align: middle;
padding: 0;
height: 45px !important;

    This sets line-height to be constant instead of changing on hover.

    Login or Signup to reply.
  4. 0

    you can use transform: scale() to adjust the font size without affecting the button’s size or the surrounding elements.

    #cshark {
  font-size: 16px; 
  transform-origin: center; /* Set transform origin */
  transition: transform 0.3s ease; /* Apply transition */
}

#cshark:hover {
  font-size: 20px; /* Change font size on hover */
  transform: scale(1.25); /* Scale up the text size */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search