CSS – Controlando a posição com botões. Sem JS!

Nesse exemplo é apresentada uma técnica que permite que um elemento tenha os valores de propriedades incrementados ou decrementados utilizando botões. É claro, sem JavaScript.

See the Pen CSS – Controlando posição com botões sem JS by Dennis Calazans (@denniscalazans) on CodePen.

Como funciona?

O grande lance dessa técnica é utilizar a pseudo-classe :active junto com transition.

Verifique o código CSS e veja que no elemento .carro existe um delay enorme de 9999999s. Mas, ao ativar o botão, o delay é modificado para 0. Isso faz com que ao clicar nos botões, as alterações são feitas. E ao soltar, elas permanecem, pois o delay é tão grande, que o usuário não verá acontecer.

Tente fazer um igual.
Aguardo o link do seu (code) PEN nos comentários.

Um abraço!