How to Change Font Size in HTML. To change font size in HTML, use the CSS font-size property. Set it to the value you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.
I think this provides a more thorough approach:
button, input[type="submit"], input[type="reset"] {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
<button>Example</button>
I'm assuming that when you say 'click the button, it moves to the top a little' you're talking about the mouse down click state for the button, and that when you release the mouse click, it returns to its normal state? And that you're disabling the default rendering of the button by using:
input, button, submit { border:none; }
If so..
Personally, I've found that you can't actually stop/override/disable this IE native action, which led me to change my markup a little to allow for this movement and not affect the overall look of the button for the various states.
This is my final mark-up:
<span class="your-button-class">
<span>
<input type="Submit" value="View Person">
</span>
</span>
Your question says "Internet Explorer," but for those interested in other browsers, you can now use all: unset
on buttons to unstyle them.
It doesn't work in IE, but it's well-supported everywhere else.
https://caniuse.com/#feat=css-all
Old Safari color warning: Setting the text color
of the button after using all: unset
can fail in Safari 13.1, due to a bug in WebKit. (The bug is fixed in Safari 14 and up.) "all: unset
is setting -webkit-text-fill-color
to black, and that overrides color." If you need to set text color
after using all: unset
, be sure to set both the color
and the -webkit-text-fill-color
to the same color.
Accessibility warning: For the sake of users who aren't using a mouse pointer, be sure to re-add some :focus
styling, e.g. button:focus { outline: orange auto 5px }
for keyboard accessibility.
And don't forget cursor: pointer
. all: unset
removes all styling, including the cursor: pointer
, which makes your mouse cursor look like a pointing hand when you hover over the button. You almost certainly want to bring that back.
button {
all: unset;
color: blue;
-webkit-text-fill-color: blue;
cursor: pointer;
}
button:focus {
outline: orange 5px auto;
}
<button>check it out</button>
Try removing the border from your button:
input, button, submit
{
border:none;
}
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