Any Way To Keep An Html Button Pressed?

I have a button . Is there any way to keep it visually pressed and unpress it via javascript? Thanks

Solution 1:

I would try CSS and use the border-style inset, personally.

<input type="button" value="Inset Border" style="border-style:inset;" />

For a list of different styles, please see this jsFiddle.

Solution 2:

No, that's not possible.

I'd suggest you to use something like the jQuery UI Buttons. They support exactly this behaviour: http://jqueryui.com/demos/button/#checkbox

Solution 3:

There is no way to do that with javascript.

But you can use javascript to simulate that effect by adding/removing a css class, or directly editing the css properties you have chosen to use.

Solution 4:

toggle the visual state of the button by:

btn.onclick=function(e) {
    this.style.borderStyle = (this.style.borderStyle!=='inset' ? 'inset' : 'outset'); 
}

when you need to see if it's depressed simply check if btn.style.borderStyle==='inset'

Solution 5:

function pp() {
    if(document.getElementById('pBut').innerHTML == 'Pause'){
        // do some stuff
        document.getElementById('pBut').innerHTML = 'Continue';
        document.getElementById('pBut').style.borderStyle = 'inset';
    }
    else {
        // do some other stuff
        document.getElementById('pBut').innerHTML = 'Pause';
        document.getElementById('pBut').style.borderStyle = 'outset';
    }
}

<button id="pBut" type="button" onclick="pp()" title="Pause or continue the chapter.">Pause</button>

Works for me. Tested With FireFox and Opera, but should be compatible with all browsers.