font size issue with <p> tag inside button

Question

button size not changing with font size on button with paragraph

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

Answer 1

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;" class="sc-fLcnxK dLvstt"> Button</button>

Answer 2

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;" class="sc-fLcnxK dLvstt">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;" class="sc-fLcnxK dLvstt">Button</button> <br /> <br /> SAMPLE #3 <button class="button-3"> Button </button>

Answer 3

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