Alterando botões e textos com HTML + CSS + Javascript

Esses dias aqui na agência nós estávamos discutindo como replicar um comportamento em botões e textos que vimos em um outro website desenvolvido em Angular, os botões mudavam de cor ao serem selecionados e os textos alteravam de acordo com o botão clicado.

Como sempre nós não queríamos simplesmente instalar mais um plugin, mas sim descobrir uma forma de implementar isso “na unha”, até por se tratar de algo que seria utilizado no widget do footer. Após algumas discussões e pesquisas, optamos por desenvolver esse código utilizando HTML + CSS + JAVASCRIPT. Atualmente o widget do WordPress aceita códigos inseridos diretamente, então partimos para o desenvolvimento.

Nós resolvemos colocar o JS diretamente no código porque por algum motivo estava dando erro ao tentarmos colocar no header, footer ou body, e não queríamos perder muito tempo.

A intenção é futuramente separar o HTML, o CSS e o JS. Se você conhece a linguagem e tem ideias para melhorias, comenta que será muito útil.