: toque CSS pseudo-clase o algo similar?

Estoy tratando de hacer un botón, de modo que cuando el usuario haga clic en él, cambie su estilo mientras se mantiene presionado el botón del mouse. También quiero que cambie su estilo de manera similar si se toca en un navegador móvil. Lo aparentemente obvio para mí fue usar CSS: pseudo-clase activa, pero eso no funcionó. Intenté: concentrarme y tampoco funcionó. Intenté: flotar y pareció funcionar, pero mantuvo el estilo después de que quité el dedo del botón. Todas estas observaciones se realizaron en un iPhone 4 y un Droid 2.

¿Hay alguna forma de replicar el efecto en los navegadores móviles (iPhone, iPad, Android y, con suerte, otros)? Por ahora, estoy haciendo algo como esto:

<style type="text/css">
    #testButton {
        background: #dddddd;
    }
    #testButton:active, #testButton.active {
        background: #aaaaaa;
    }
</style>

...

<button type="button" id="testButton">test</button>

...

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
    $("*").live("touchstart", function() {
      $(this).addClass("active");
    }).live("touchend", function() {
      $(this).removeClass("active");
    });
</script>

La pseudoclase: active es para navegadores de escritorio y la clase activa es para navegadores táctiles.

Me pregunto si hay una forma más sencilla de hacerlo, sin involucrar a Javascript.

No existe tal cosa :touchen las especificaciones de W3C, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active debería funcionar, yo pensaría.

El orden en la pseudoclase :active/ :hoveres importante para que funcione correctamente.

Aquí hay una cita del enlace de arriba

Los agentes de usuario interactivos a veces cambian la representación en respuesta a las acciones del usuario. CSS proporciona tres pseudoclases para casos comunes:

• La pseudoclase: hover se aplica mientras el usuario designa un elemento (con algún dispositivo señalador), pero no lo activa. Por ejemplo, un agente de usuario visual podría aplicar esta pseudoclase cuando el cursor (puntero del mouse) se desplaza sobre un cuadro generado por el elemento. Los agentes de usuario que no admiten medios interactivos no tienen que admitir esta pseudoclase. Es posible que algunos agentes de usuario compatibles que admitan medios interactivos no admitan esta pseudoclase (por ejemplo, un dispositivo de lápiz).
• La pseudoclase: active se aplica mientras el usuario activa un elemento. Por ejemplo, entre las veces que el usuario presiona el botón del mouse y lo suelta.
• La pseudoclase: focus se aplica mientras un elemento tiene el foco (acepta eventos de teclado u otras formas de entrada de texto).

Dado que los dispositivos móviles no brindan comentarios de desplazamiento, quiero, como usuario, ver comentarios instantáneos cuando se toca un enlace. Noté que -webkit-tap-highlight-colores el más rápido en responder (subjetivo).

Agregue lo siguiente a su cuerpo y sus enlaces tendrán un efecto de toque.

body {
    -webkit-tap-highlight-color: #ccc;
}

Estaba teniendo problemas con el estilo de los botones de la pantalla táctil del móvil. Esto solucionará los problemas del botón activo o del botón de desplazamiento.

body, html {
  width: 600px;
}
p {
  font-size: 20px;
}

button {
  border: none;
  width: 200px;
  height: 60px;
  border-radius: 30px;
  background: #00aeff;
  font-size: 20px;
}

button:active {
  background: black;
  color: white;
}

.delayed {
  transition: all 0.2s;
  transition-delay: 300ms;
}

.delayed:active {
  transition: none;
}

<h1>Sticky styles for better touch screen buttons!</h1>

<button>Normal button</button>

<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>

<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures.   With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely.  This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>

<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>