Remove 3D Press Effect Internet Explorer Button

Remove 3D press effect Internet Explorer button

Had the same problem right now... It's a bit late, so I don't know whether the answer would still be applicable.

My solution was to put the button's text within a span element then set the style to transform: translateY(1px);. And no more unnecessary press effect. I was a bit apprehensive before trying it, as it would mess with FF, Chrome, and Safari for Windows. But weirdly, they seem to ignore it (for now at least). Tested on 28, 27, and 5.1 respectively. Also, I'm using IE 10.

Good luck

Remove 3D push effect on a button

One way would be to get rid of the <button> tag completely and use a <a href=".." /> tag in its place styled the way you want.

Just have the link do a javascript postback.

update (from comments):

one example:

<a href="#" onclick="document.formName.submit();">Click Here</a>

Of course, this requires javascript to be enabled and is considered by some to be an abuse of the anchor tag.

There are alternate versions if you are using .net webforms or jQuery.

Remove 3D push effect on a button

One way would be to get rid of the <button> tag completely and use a <a href=".." /> tag in its place styled the way you want.

Just have the link do a javascript postback.

update (from comments):

one example:

<a href="#" onclick="document.formName.submit();">Click Here</a>

Of course, this requires javascript to be enabled and is considered by some to be an abuse of the anchor tag.

There are alternate versions if you are using .net webforms or jQuery.

How to remove 'press button' effect and make button flat even on click

Just a suggestion.

When you use bootstrap, you can see, in the bootstrap.css code, this :

.btn {

  display: inline-block;

  padding: 6px 12px;

  margin-bottom: 0;

  font-size: 14px;

  font-weight: normal;

  line-height: 1.42857143;

  text-align: center;

  white-space: nowrap;

  vertical-align: middle;

  -ms-touch-action: manipulation;

      touch-action: manipulation;

  cursor: pointer;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  background-image: none;

  border: 1px solid transparent;

  border-radius: 4px;

}

.btn:focus,

.btn:active:focus,

.btn.active:focus,

.btn.focus,

.btn:active.focus,

.btn.active.focus {

  outline: thin dotted;

  outline: 5px auto -webkit-focus-ring-color;

  outline-offset: -2px;

}

.btn:hover,

.btn:focus,

.btn.focus {

  color: #333;

  text-decoration: none;

}

.btn:active,

.btn.active {

  background-image: none;

  outline: 0;

  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);

          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);

}

.btn.disabled,

.btn[disabled],

fieldset[disabled] .btn {

  cursor: not-allowed;

  filter: alpha(opacity=65);

  -webkit-box-shadow: none;

          box-shadow: none;

  opacity: .65;

}

a.btn.disabled,

fieldset[disabled] a.btn {

  pointer-events: none;

}

.btn-default {

  color: #333;

  background-color: #fff;

  border-color: #ccc;

}

.btn-default:focus,

.btn-default.focus {

  color: #333;

  background-color: #e6e6e6;

  border-color: #8c8c8c;

}

.btn-default:hover {

  color: #333;

  background-color: #e6e6e6;

  border-color: #adadad;

}

.btn-default:active,

.btn-default.active,

.open > .dropdown-toggle.btn-default {

  color: #333;

  background-color: #e6e6e6;

  border-color: #adadad;

}

.btn-default:active:hover,

.btn-default.active:hover,

.open > .dropdown-toggle.btn-default:hover,

.btn-default:active:focus,

.btn-default.active:focus,

.open > .dropdown-toggle.btn-default:focus,

.btn-default:active.focus,

.btn-default.active.focus,

.open > .dropdown-toggle.btn-default.focus {

  color: #333;

  background-color: #d4d4d4;

  border-color: #8c8c8c;

}

.btn-default:active,

.btn-default.active,

.open > .dropdown-toggle.btn-default {

  background-image: none;

}

.btn-default.disabled,

.btn-default[disabled],

fieldset[disabled] .btn-default,

.btn-default.disabled:hover,

.btn-default[disabled]:hover,

fieldset[disabled] .btn-default:hover,

.btn-default.disabled:focus,

.btn-default[disabled]:focus,

fieldset[disabled] .btn-default:focus,

.btn-default.disabled.focus,

.btn-default[disabled].focus,

fieldset[disabled] .btn-default.focus,

.btn-default.disabled:active,

.btn-default[disabled]:active,

fieldset[disabled] .btn-default:active,

.btn-default.disabled.active,

.btn-default[disabled].active,

fieldset[disabled] .btn-default.active {

  background-color: #fff;

  border-color: #ccc;

}

.btn-default .badge {

  color: #fff;

  background-color: #333;

}

<button class="btn btn-default">BTN DEFAULT</button>

Remove 3D effect of the background of a button

The problem I have with Bootstrap is you constantly need to override their default styling and you have to be very specific about how you target the element, otherwise Bootstrap will override your css. (Or you can put !important beside everything -> not advised)

Anyways, rant over, the 3d effect you are seeing is a box shadow. Simply set the box shadow to none.

button.btn.btn-default {

  background: #e0e0e0;

  box-shadow: none;

}

<!DOCTYPE html>

<html>

<head>

  <script src="https://code.jquery.com/jquery.min.js"></script>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

</head>

<body>

  <div class="btn-group" data-toggle="buttons-checkbox">

    <button type="button" class="btn btn-default active">INPUT</button>

  </div>

</body>

</html>

Prevent button from shifting during click in IE

Put your text on a <span> and position:relative in it, it'll fix.

button span{
    position: relative;
}

No need for top and left definition.

Internet Explorer button:active inner-padding

Update: For IE11+, it can be removed.

---

No, you can't get rid of it (in old versions of Internet Explorer).

As @Spudley said:

If you don't want that effect, don't use a button element.

If it really matters, then an a element is the only alternative, but it's not really worth switching just to fix this. Users of Internet Explorer are used to it.

How to remove clear button from IE7-9?

Unlike IE10+, IE9 and prior don't display a "clear button" in HTML form fields. Are you trying to enable the page to run in IE7-IE9 mode inside IE10? If not, you don't need to do anything else.

If you are using the X-UA-Compatible declaration to run pages in IE7-IE9 mode inside IE10, you're stuck (no workaround) because the -ms-clear CSS rule is only supported in IE10 mode. (Many duplicates of that question here on StackOverflow)

---

Related Topics