Удалить трехмерный эффект нажатием кнопки

Ответ 1

Один из способов - полностью избавиться от тега <button> и использовать тег <a href=".." /> на своем месте, как вы хотите.

Просто добавьте ссылку для обратной передачи javascript.

обновление (из комментариев):
один пример:

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

Конечно, для этого требуется, чтобы javascript был включен, и некоторые считают, что это злоупотребление тегом привязки.

Существуют альтернативные версии, если вы используете .net webforms или jQuery.

Ответ 2

вам нужно добавить стили фона для: hover: active: focus.

#header #go button:hover {
border: none;
outline:none;
padding: 5px;
background:url('../images/cards/go.png');
}

#header #go button:active {
border: none;
outline:none;
padding: 5px;
background:url('../images/cards/go.png');
}

#header #go button:focus {
border: none;
outline:none;
padding: 5px;
background:url('../images/cards/go.png');
}

Ответ 3

У меня был подобный опыт, и я смог его исправить в IE8, но не в IE7. Смотрите, как он работает здесь: http://jsfiddle.net/GmkVh/7/

HTML:

<button></button>

CSS

button {
    color:#fff;
    background:#000;
    border: none;
    outline:none;
    padding: 5px;
    cursor: pointer;
    height: 25px;
}

/* 
   It hits this state (at least in IE) as you're clicking it
   To offset the 1px left and 1px top it adds, subtract 1 from each, 
   then add 1 to the right and bottom to keep it the same width and height
*/
button:focus:active {
    padding-top: 4px;
    padding-left: 4px;
    padding-right: 6px;
    padding-bottom: 6px;
    color: #ccc;
}

Ответ 4

После того, как вы сделали все, что захотите, с помощью рамки и т.д., просто поместите проем внутри кнопки вокруг текста так:

<button class="button" type="submit"><span class="buttonspan">Blah</span></button>

Затем CSS становится:

button {position:relative; width:40px; height:20px /* set whatever width and height */}

buttonspan {
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

Ответ 5

<div class="calculation_button">
  <button type="submit"><span>Count</span></button>
</div>

.calculation_button span {
position: relative;
left: 0;
top: 0;
}

работает для меня в IE и FF

Ответ 6

В IE 10 мне помогли:

button:active {
  position: relative;
  top: -1px;
  left: -1px;
}

Он отлично фиксировал верх, но у него все еще было кровотечение из-за фона, хотя для моего случая. Все еще выглядит немного странно, если пользователь начинает нажимать, а затем перемещает мышь с кнопки. Также очевидно, что разрешено только правило для соответствующей версии (ов) IE.

Ответ 7

Позиция, по-видимому, позаботилась о проблеме

Просто закройте оболочку внутри кнопки:

Итак,

<button>
   <div class="content">Click Me</div>
</button>

и установите DIV в положение относительно сверху: 0, left: 0

Пример ниже:

http://jsfiddle.net/eyeamaman/MkZz3/

Ответ 8

Это поведение браузера, простое решение - использовать тег ссылки вместо кнопки (поскольку вы вызываете функцию javascript).

<a href="#" onclick="myfunction()" role="button"><img src="myimg"/></a>

Если вы все еще хотите использовать, я обнаружил, что в каждом браузере есть некоторые характеристики (в простой отладке):

• Chrome добавляет контур и дополнение
• Firefox добавляет множество вещей с рамкой стандартной кнопки
• IE беспорядок с внутренней текстовой позицией

Итак, чтобы исправить их, вам нужно манипулировать псевдоселекторами для поведения кнопки. И для IE хорошим решением является включение вашего текста в элемент и его относительное расположение. Например:

<button type="button" class="button"><span>Buttom or Image</span></button>

<style>
    button,
    button:focus,
    button:active{
        border:1px solid black;
        background:none;
        outline:none;
        padding:0;
    }
    button span{
        position: relative;
    }
</style>

Pen

Это повторяющийся вопрос