Question

i have a button in asp.net like below :

<asp:Button ID="btnSaveInrpvEdit" CssClass="btnSaveInrpvEdit" runat="server" 
    Text="" ValidationGroup="B" onclick="btnSaveInrpvEdit_Click" />

and it’s css :

.btnSaveInrpvEdit
{
    background: url(/Images/Admin/btnSave.png) no-repeat left top;
    width: 155px;
    height: 63px;
    border: 0px;
    outline: none;
}
.btnSaveInrpvEdit:hover,.btnSaveInrpvEdit:active
{
    background: url(/Images/Admin/btnSave_Hover.png) no-repeat left 1px;
    cursor: pointer;
    outline: none;
}

so every thing is ok about it’s hovering…
at this time i want to implement this button behaviour about left mouse HOLDING and RELEASING on it!
if you attention to regular buttons in asp.net u will see when left mouse is clicked and holded on that button , so it seems it’s text has been moved a bit…
also when we release left mouse, that button goes back to normal mode!

how can i do this job with css and javascript?

thanks in advance

Answer 1

First, note that the text moving (and if the text moves) in the pressed button has nothing to do with the <asp:Button (or the input element it renders) directly. The button styles and visual behaviour depend to a small part on the browser and to a large part on the windows version and theme the client uses. Manually moving the background image could look very weird on themes that don’t actually move the text.

That said, you can emulate the behaviour relatively easy with JavaScript respectively jQuery in particular.

Something like this should work:

CSS (I used normal style here because pressing usually removes the hover style)

.btnSaveInrpvEdit.mousedown
{
    background: url(/Images/Admin/btnSave.png) no-repeat 1px 1px;
}

JS + jQuery

$("#btnSaveInrpvEdit").mousedown(function () { $(this).addClass("mousedown"); });
$("#btnSaveInrpvEdit").mouseup(function () { $(this).removeClass("mousedown"); });

You probably also have to handle the user pressing the button but then holding and dragging the cursor away from the button, which causes the button to un-press visually but will also return to the pressed state if you move the mouse back over the button. This is a bit more tricky but I’m sure you got the gist of it and can work something out 😉

As a quick fix to at least prevent the button background staying offset forever you can add

$("#btnSaveInrpvEdit").mouseleave(function () { $(this).removeClass("mousedown"); });