font size issue with <p> tag inside button-CodePudding

button size not changing with font size on button with paragraph , Can Anyone please suggest

   <button style="font-size: 10px; color: white; font-weight: 500; width: auto; height: auto;" >
  <p style="font-weight: 500; color: #FFFFFF; display: block; font-family: inherit; font-size: 16px;" >Button</p>
</button>

CodePudding user response：

Well you are making a mistake that you can not use style properties like this. Instead use the style attribute as below. Also do not use p tag inside button tag cause button tag is inline elem whereas p tag is a block elem.

<button style="font-size:20px; color:black; font-weight:500; width:auto; height:auto;" >
     Button</button>

CodePudding user response：

This are some samples of buttons. I would suggest you use the sample button number 3 which put on a class and externalized the css. play with it hope this helps you.

.button-3 {

  font-family: inherit; 
  font-size: 16px; color: white; 
  font-weight: 500; 
  width: auto; 
  height: auto; 
  color: red;
  padding: 5px;

}

SAMPLE #1

<button style="font-family: inherit; font-size: 16px; color: white; font-weight: 500; width: auto; height: auto; color: #FFFFFF;" >Button</button>

<br />
<br />
SAMPLE #2

<button style="font-family: inherit; font-size: 10px; color: white; font-weight: 500; width: auto; height: auto; color: #FFFFFF;" >Button</button>


<br />
<br />
SAMPLE #3

<button >
Button
</button>

CodePudding user response：

You can try inline style css. hope this will work.