how to Change font size, Without changing the size of button in CSS

html css font-size

13,223

Solution 1

To change the text size without changing the button size, you would need to fix the size of the button. This can be done using height and width in CSS. That way you can change the font-size without having it affect the button size.

Take a look at my code below. As you can see, with the height and width changed, the button is now a fixed size. This is proven by the text being larger than the button.

CSS

button {
  font-size: 30px;
  height: 60px;
  width: 60px;
}

HTML

<button>
Hello
</button>

Solution 2

You can also use span tag which worked quite well for me.

 <button><span style="font-size:10px;">ClickMe</span></button>

Solution 3

Change your style to this

.sm
{
  font-size:20px;
  height:30px;
  width: 120px;
}

hope this helps !

13,223

Author by

Ans Bilal

Updated on June 04, 2022

Comments

Ans Bilal about 2 years

In the following code I want to change just inner font size not the button size.

<html>
    <head>
        <style>
            .sm {
                font-size:x-small;
            }
        </style>
    </head>
    <body>
        <button class="sm">submit</button>
    </body>
</html>