: toque na pseudo-classe CSS ou algo semelhante?

Estou tentando fazer um botão que, quando o usuário clica nele, muda de estilo enquanto o botão do mouse é pressionado. Também quero que ele mude seu estilo de maneira semelhante se for tocado em um navegador móvel. O que parecia óbvio para mim era usar o CSS: pseudo-classe ativa, mas não funcionou. Eu tentei: foco, e não funcionou também. Eu tentei: pairar, e pareceu funcionar, mas manteve o estilo depois que tirei meu dedo do botão. Todas essas observações foram feitas em um iPhone 4 e um Droid 2.

Existe alguma maneira de replicar o efeito em navegadores móveis (iPhone, iPad, Android e, possivelmente, outros)? Por enquanto, estou fazendo algo assim:

<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>

A pseudo classe: active é para navegadores de desktop, e a classe active é para navegadores de toque.

Gostaria de saber se existe uma maneira mais simples de fazer isso, sem envolver Javascript.

Não existe algo como :touchnas especificações W3C, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active deve funcionar, eu acho.

A ordem na pseudo classe :active/ :hoveré importante para que funcione corretamente.

Aqui está uma citação do link acima

Os agentes de usuário interativos às vezes alteram a renderização em resposta às ações do usuário. CSS fornece três pseudo classes para casos comuns:

• A pseudo classe: hover se aplica enquanto o usuário designa um elemento (com algum dispositivo apontador), mas não o ativa. Por exemplo, um agente de usuário visual pode aplicar esta pseudo classe quando o cursor (ponteiro do mouse) passa sobre uma caixa gerada pelo elemento. Os agentes de usuário que não oferecem suporte a mídia interativa não precisam oferecer suporte a essa pseudoclasse. Alguns agentes de usuário compatíveis com mídia interativa podem não ser capazes de oferecer suporte a essa pseudo classe (por exemplo, um dispositivo de caneta).
• A pseudo classe: active aplica-se enquanto um elemento está sendo ativado pelo usuário. Por exemplo, entre os momentos em que o usuário pressiona o botão do mouse e o solta.
• A pseudo classe: focus se aplica enquanto um elemento tem o foco (aceita eventos de teclado ou outras formas de entrada de texto).

Uma vez que o celular não fornece feedback ao passar o mouse, quero, como usuário, ver o feedback instantâneo quando um link é tocado. Percebi que -webkit-tap-highlight-coloré o mais rápido a responder (subjetivo).

Adicione o seguinte ao seu corpo e seus links terão um efeito de toque.

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

Eu estava tendo problemas com o estilo dos botões da tela de toque móvel. Isso resolverá os problemas do hover-stick / botão ativo.

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>