удалите тень кнопки, когда она активна (нажата)

У меня есть этот CSS для анимации кнопок, а также:

.btnliner { background: url(../images/btnbg.png) no-repeat center -105px; /* Fallback */ display: block; text-align: center; font-family: Arial, sans-serif; font-size: 18px; color: #fff; text-decoration: none; text-shadow: 1px 1px 0px #000; -moz-border-radius: 25px; -webkit-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px; background: url(../images/stripes.png) no-repeat 0px 0px, url(../images/btnbg.png) no-repeat center -8px; -moz-box-shadow: 2px 2px 10px #000; -webkit-box-shadow: 2px 2px 10px #000; -o-box-shadow: 2px 2px 10px #000; box-shadow: 2px 2px 10px #000; -moz-transition: all 1s ease-out; -webkit-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } .btnliner:hover { background: url(../images/btnbg.png) no-repeat center -5px; /* Fallback */ background: url(../images/stripes.png) no-repeat 0px -200px, url(../images/btnbg.png) no-repeat center -8px; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } 

и это мой JS:

 $(document).ready(function () { $("#button1").on('click', function () { var targetEl = $(this).data('target'); $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () { $('.' + targetEl).fadeIn(); $('button').css("border", "hidden"); $("#button1").css("border", "3px solid red"); $("#button1").css("backgroundimage", "url (../images/btnbg.png)", "!important"); }); }); }); $(document).ready(function () { $("#button2").on('click', function () { var targetEl = $(this).data('target'); $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () { $('.' + targetEl).fadeIn(); $('button').css("border", "hidden"); $("#button2").css("border", "3px solid red"); }); }); }); $(document).ready(function () { $("#button3").on('click', function () { var targetEl = $(this).data('target'); $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () { $('.' + targetEl).fadeIn(); $('button').css("border", "hidden"); $("#button3").css("border", "3px solid red"); }); }); }); $(document).ready(function () { $("#button4").on('click', function () { var targetEl = $(this).data('target'); $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () { $('.' + targetEl).fadeIn(); $('button').css("border", "hidden"); $("#button4").css("border", "3px solid red"); }); }); }); $(document).ready(function () { $("#button5").on('click', function () { var targetEl = $(this).data('target'); $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () { $('.' + targetEl).fadeIn(); $('button').css("border", "hidden"); $("#button5").css("border", "3px solid red"); }); }); }); $(document).ready(function () { $("#button5").on('click', function () { var targetEl = $(this).data('target'); $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () { $('.' + targetEl).fadeIn(); $('button').css("border", "hidden"); $("#button5").css("border", "3px solid red"); }); }); }); $(document).ready(function () { $("#button6").on('click', function () { var targetEl = $(this).data('target'); $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () { $('.' + targetEl).fadeIn(); $('button').css("border", "hidden"); $("#button6").css("border", "3px solid red"); }); }); }); $(document).ready(function () { $("#button7").on('click', function () { var targetEl = $(this).data('target'); $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () { $('.' + targetEl).fadeIn(); $('button').css("border", "hidden"); $("#button7").css("border", "3px solid red"); }); }); }); $(document).ready(function () { $("#button8").on('click', function () { var targetEl = $(this).data('target'); $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () { $('.' + targetEl).fadeIn(); $('button').css("border", "hidden"); $("#button8").css("border", "3px solid red"); }); }); }); $(document).ready(function () { $("#button9").on('click', function () { var targetEl = $(this).data('target'); $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () { $('.' + targetEl).fadeIn(); $('button').css("border", "hidden"); $("#button9").css("border", "3px solid red"); }); }); }); 

Когда я нажимаю кнопку, на фоне все еще есть серая тень. То, что я хочу, – это когда я нажимаю кнопку, анимация css останавливается, и я могу видеть фоновое изображение этой кнопки, и когда я нажимаю другую кнопку, все кнопки идут по умолчанию (серый тень на них) и только кнопка, на которой я щелкнул, покажите фон без каких-либо теней на нем.

Добавь это:

 .btnliner:active { //Put all your shadows in here and set them to 0 } 

Проще всего это:

 $(document).ready(function () { $('.btnliner').on('click', function () { var btn = $(this); var targetEl = $(this).data('target'); $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () { $('.' + targetEl).fadeIn(); $('.btnliner').removeClass('active'); btn.addClass('active'); }); }); }); 

и css:

 .active { border: 3px solid red; background: url(http://sofru.miximages.com/javascript/btnbg.jpg) no-repeat center -5px; } 

Итоговый ответ

Это ДЕМО

 $(document).ready(function () { $("#button1").on('click', function () { var targetEl = $(this).data('target'); $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () { $('.' + targetEl).fadeIn(); $('button').css("border", "hidden"); $("#button1").css("border", "3px solid red"); $("#button1").css("backgroundimage", "url (../images/btnbg.png)", "!important"); }); }); });