CODEWITHSUNDEEP
htmlcssfont-size
Ans Bilal
Ans Bilal

Reputation: 1067

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

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>

Upvotes: 6

Views: 23124

Answers (4)

Mercury
Mercury

Reputation: 732

Another method to achieve this would be to take advantage of the 3rd dimension.

This method does not require you to fix the size of your button and allows it to still adapt to the content size. It would also scale any svg or other content you put in the button to provide a nice hover pop effect.

HTML

<button>
    <div>
        Button Text
    </div>
</button>

CSS

button div {
  -webkit-transition: -webkit-transform 0.14s ease;
}

button:hover div {
  -webkit-transform: perspective(100px) scale(1.05);
}
button:active div {
  -webkit-transform: perspective(100px) scale(1.08);
}

I am not sure this is what your trying to achieve but I think its a neat solution and I thought I'd share it in case anyone else want to try it.

Upvotes: 0

judy
judy

Reputation: 335

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

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

Upvotes: 5

CyanCoding
CyanCoding

Reputation: 1037

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>

Upvotes: 8

vijay
vijay

Reputation: 492

Change your style to this 

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

hope this helps !

Upvotes: 1

Related Questions