Remove the complete styling of an HTML button submit

Question

Is there a way of completely removing the styling of a button in Internet Explorer  I use a css sprite for my button  and everything looks ok    But when I click the button  it moves to the top a little  it makes it look out of shape  Is there a css click state  or mousedown  I don t know what triggers that state   I know it s not a really big deal  but sometimes it s the small things that matter

User · Answer

In bootstrap 4 is easiest   You can use the classes   bg-transparent and border-0

User · Answer

Your question says  quot Internet Explorer  quot  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    quot all  unset is setting -webkit-text-fill-color to black  and that overrides color  quot  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   x000D   x000D  button     all  unset    color  blue    -webkit-text-fill-color  blue    cursor  pointer     button focus     outline  orange 5px auto    x000D   lt button gt check it out lt  button gt  x000D   x000D   x000D

User · Answer

I think this provides a more thorough approach    x000D   x000D  button  input type  submit    input type  reset     x000D   background  none  x000D   color  inherit  x000D   border  none  x000D   padding  0  x000D   font  inherit  x000D   cursor  pointer  x000D   outline  inherit  x000D    x000D   lt button gt Example lt  button gt  x000D   x000D   x000D

User · Answer

Try removing the border from your button   input  button  submit     border none

User · Answer

Add simple style to your button  btn       background  none      color  inherit      border  none      padding  0      font  inherit      cursor  pointer      outline  inherit

User · Answer

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    x000D   x000D   lt span class  your-button-class  gt  x000D       lt span gt  x000D           lt input type  Submit  value  View Person  gt  x000D       lt  span gt  x000D   lt  span gt  x000D   x000D   x000D

User · Answer

I think it s the button  active  state

[html] Remove the complete styling of an HTML button/submit

Examples related to html

Examples related to css

Examples related to internet-explorer

Examples related to button

Examples related to state