How to return a button to its inactive state in mobile browsers

Question

On touch-screen devices how do I return an HTML button back to its non-active state, after it has been pressed? Hover and active pseudo selectors are currently styled the same:

button.largeButton {
    font-size:15px;
    padding:0 18px;
    height:36px;
    background:#fff;
    border:none;
    border:2px solid #1a1a1a;
    box-shadow:0 0 6px rgba(0,0,0,0.18), inset 0 0 6px rgba(0,0,0,0.18);
    letter-spacing:1px;
    color:#1a1a1a;
    border-radius:1px;
    -webkit-transition: all 0.09s ease-out;
       -moz-transition: all 0.09s ease-out;
         -o-transition: all 0.09s ease-out;
            transition: all 0.09s ease-out;
}

button.largeButton:hover,
button.largeButton:active {
    background:#1a1a1a;
    color:#fff;
    box-shadow: inset 0 0 9px rgba(255,255,255,0.18);
    -webkit-transition: all 0.09s ease-out;
       -moz-transition: all 0.09s ease-out;
         -o-transition: all 0.09s ease-out;
            transition: all 0.09s ease-out;
    border-color:#333;
}

A CSS only solution is preferable, but a JS/jQuery is fine.

Travis J · Answer 1 · 2013-06-11T00:49:43.970

jsFiddle Demo

Perhaps you should attempt this by segregating your class names for active/hover a little bit

button.largeButton:hover,
button.largeButton:active {...}

could become

button.activeButton:hover,
button.activeButton:active {...}

and then once the button had been clicked, this class would be removed.

sample html

<button class="activeButton largeButton">

jquery to remove class

$(".activeButton").click(function(){$(this).removeClass("activeButton");});

There is no pure css way to do this unfortunately. The best way would be to use :visited however, that is not possible because

Note: For privacy reasons, browsers strictly limit the styles you can apply using an element selected by this pseudo-class: only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke. Note also that the alpha component will be ignored: the alpha component of the not-visited rule is used instead (except when the opacity is 0, in that case the whole color is ignored, and the one of the not-visited rule is used. - MDN :visited

This disables the button - I still want it to be clickable, I just don't want it to have its hover/active appearance. Sorry if I didn't explain myself properly. — verism, Jun 11 '13 at 00:35
This approach is much better (I adapted to fire a few ms after a press, rather than on) but isn't quite working either - there's flicker when pressing in mobile safari, and the CSS transitions are overridden. I think I might need to re-tackle this tomorrow. — verism, Jun 11 '13 at 01:09
@verism - To counter that you may want to use this: `-webkit-tap-highlight-color:transparent` on the element. See this so answer: http://stackoverflow.com/a/3516243/1026459 — Travis J, Jun 11 '13 at 01:37

score -1 · Answer 2 · answered Jun 11 '13 at 01:33

-1

Unfortunately, there's no way that I know of to be able to, post-click, return to inactive state. The way to do this in jQuery is very simple though.

$('.largeButton').click(function() { $(this).blur(); });

answered Jun 11 '13 at 01:33

Ming

4,468
1
21
21

How to return a button to its inactive state in mobile browsers

2 Answers2