Menu
I have some buttons on my pure HTML/JS page. When the page is opened in browser, the button size is normal. But on refresh/reloading page, the button size is reduced. In fact, I have not set the button text value. The button's text is blank. How should I set the size of my button in HTML irrespective to the size of the text?
845
Editing the size of a button in HTML is relatively easy. In the simplest form you just have to add a 'style' attribute to the button element containing your desired height and width values in pixels. It goes something like this. Alternatively, you can add a 'class' to button and add your styles in a CSS file.
style. height = '200px'; myButton. style. width= '200px';
display: block and width: 100% is the correct way to go full width but you need to remove the left/right margin on the button as it pushes it outside the containing element. for more information on the box-sizing property, read the MDN docs.
Do you mean something like this?
HTML
<button class="test"></button> CSS
.test{ height:200px; width:200px; } If you want to use inline CSS instead of an external stylesheet, see this:
<button style="height:200px;width:200px"></button> This cannot be done with pure HTML/JS, you will need CSS
CSS:
button { width: 100%; height: 100%; } Substitute 100% with required size
This can be done in many ways
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
