Эфеект при нажатии на кнопку не работает в IE10?

Question

[kkoshakk]

.btn-default:active {
background-color: #e0e0e0;
background-image: -webkit-radial-gradient(circle, #e0e0e0 10%, #ffffff 11%);
background-image: -o-radial-gradient(circle, #e0e0e0 10%, #ffffff 11%);
background-image: radial-gradient(circle, #e0e0e0 10%, #ffffff 11%);
background-repeat: no-repeat;
-webkit-background-size: 1000% 1000%;
background-size: 1000%;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

В хроме и опере все ok

Answer 1

[Роман Дворянов]

Это бага IE10 и Opera 11.64, у них не работают эти псевдоклассы
Можно в jquery вешать класс по нажатию

$(".btn-default").on("mousedown mouseup mouseleave", function(e){
    $(this).toggleClass( "active", e.type === "mousedown" );
});

Comments

[kkoshakk]

А как можно обойтись без jQuery?

[Роман Дворянов]

Можно в разметке к кнопке добавить атрибуты
onmousedown="this.classList.add('active')" onmouseup="this.classList.remove('active')"
при нажатии будет добавляться класс active, при отжатии убираться

[kkoshakk]

Так подождите, псевдокласс :active работает в IE10, box-shadow срабатыват

[Роман Дворянов]

kkoshakk: тогда что именно не работает? Радиальный градиент?

[kkoshakk]

Не работает при transition background-size 1000%

[Роман Дворянов]

kkoshakk: честно говоря воспроизвести вашу проблему не получается, т.к. нет нативного IE19, а под эмуляцией никакой визуальной разницы от Хрома не заметил.
Могу предложить попробовать добавить префикс -ms- к background-size
Правильно ли я понимаю, что вы хотите добиться эффекта как в Material Design?
Возможно этот вариант вам пригодится codepen.io/440design/pen/iEztk

[Роман Дворянов]

Роман Д.: IE10 конечно же

[kkoshakk]

Да, Вы правильно поняли, я хочу эффект материал, но без jquery. Но я не могу понять, что именно не работает при transition? background-size или background image, или и то и то?