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?
Add a comment
|
5 Answers
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>
-
13That isn't avoiding CSS, it's just using inline CSS instead of an external stylesheet.– KyleCommented Jul 30, 2015 at 20:38
-
2
-
3
-
Inline CSS more flexible with regards to possibly wanting different widths for different buttons. Commented Jul 22, 2021 at 10:58
-
I read that inline elements don't take width and height and to make them take height and width , we need to make the display as display: inline-block. But here width and height properties work perfectly without the display: inline-block.– HasnainCommented Dec 2, 2021 at 17:42
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
button {
width:1000px;
}
or even
button {
width:1000px !important
}
If thats what you mean
If using the following HTML:
<button id="submit-button"></button>
Style can be applied through JS using the style object available on an HTMLElement.
To set height and width to 200px of the above example button, this would be the JS:
var myButton = document.getElementById('submit-button');
myButton.style.height = '200px';
myButton.style.width= '200px';
I believe with this method, you are not directly writing CSS (inline or external), but using JavaScript to programmatically alter CSS Declarations.
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,and have text, see this Example:
<button style="height:200px;width:200px">your text here</button>```
