مشکل با سایه های باتن سایت؟؟؟

یه راهش استفاده از removeClass() و addClass()
jquery هست.
مثل:

کد:

<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script> <script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function() -- $(".button").mouseover(function() -- $(this).addClass("Hover"); }); $(".button").mouseout(function() -- $(this).removeClass("Hover").removeClass("Pressed"); }); $(".button").mousedown(function() -- $(this).addClass("Pressed"); }); $(".button").mouseup(function() -- $(this).removeClass("Pressed"); }); }); </script> </head> <body> <style> body -- background: white } /* This button style is suitable for sites using a white background */ a.button -- background: #ffffff; padding: 2px 8px 2px 8px; /* Button padding */ font-size: 12px; font-weight: bold; display: inline; color: #888888; border: 1px solid #cccccc; border-radius: 32px; /* Rounder corners */ font-family: Arial, sans-serif; cursor: pointer; /* Resurrect the pointer */ text-decoration: none; /* Remove default underline style from hyperlink */ } /* I decided to separate gradients */ a.button -- background: rgb(255,255,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */ } .Hover -- border: 1px solid #bbbbbb !important; color: #777777 !important; box-shadow: 0px 1px 2px #dddddd; } .Pressed -- background: rgb(229,229,229) !important; -moz-box-shadow: 0px 1px 1px 0px #cccccc inset; -webkit-box-shadow: 0px 1px 1px 0px #cccccc inset; box-shadow: 0px 1px 1px 0px #cccccc inset; text-shadow: 0px 1px 0px #fff; } </style> <h1>CSS Buttons Example from <a href = "http://www.learnjquery.org/" alt = "Download jQuery PDF e-book">Understanding jQuery</a>:</h1> <a class = "button">Watch</a> <a class = "button">Cancel</a> <a class = "button">Delete</a>   Empty buttons: <a class = "button">A</a> <a class = "button">b</a> <a class = "button">c</a> <a class = "button">d</a> <a class = "button">e</a> <a class = "button">f</a> <p><a class = "button">f</a></p> </body> </html>