Forse non e' una cosa che serva a molto.. ma spero che possa essere utile a qualcuno : )

Quello che andreamo a creare e' un testo con effetto tridimensionale , che abbia la funzione di un pulsante (quindi esegua una azione); per farlo useremo un misto di JavaScript e jQuery.

Come prima cosa creiamo un file HTML con un elemento che conterra' il testo (ID puo' essere variato come preferite)
Codice HTML:
<div id="testo"></div>
Quindi creiamo gli stili CSS che definiranno la prospettiva (per creare l'effetto 3D) e l'aspetto del testo
Codice:
<style>
 /* definiamo l'area di testo con una prospettiva per creare l'effetto 3D*/
 #testo{
  /* area da NON modificare */
  perspective:1000px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  -webkit-perspective:1000px;
  -webkit-perspective-origin: 50% 50%;
  -webkit-transform-style: preserve-3d;
  position:absolute; 
  /* area Modificabile */
  top:50px;left:100px;
  width:200px;height:50px;
  cursor:pointer;
 }
 /* definiamo l'aspetto del testo */
 #testo p{
  /* area da NON modificare */
  position:absolute; 
  top:0px;left:0px; 
  /* area Modificabile */
  font-family:Arial, serif;
  font-size:300%;    
 }
</style>
come potrete vedere ci sono delle parti di codice che non bisogna modificare :
- quando definiamo la prospettiva
- la posizione del testo per poter ottenere la tridimensionalita'

Ora passiamo allo script :
come prima cosa carichiamo la libreria jQuery , quindi eseguiamo il codice , quando il caricamento del documento e' completo eseguiamo le nostre funzioni.
Lo script e' costituito da 4 funzioni ( crea3D , muovi3D , clicca3D e cancel3D )

Codice:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
 /* variabile per il controllo del pulsante */
 var clickStatus = 0;

 /* eseguiamo le funzioni per creare il nostro effetto 3D */
 crea3D("testo","YES",100,"red","orange"); /* crea il testo */
 muovi3D("testo"); /* crea il movimento on mouse over */
 clicca3D("testo","YES","NO","red","orange","blue","cyan",100); /* crea il cambio sul click */


 /* funzione per creare il testo 3D */
 /* argomenti: div -> ID dell'elemento */
 /* testo -> il testo da scrivere */
 /* spessore -> la profondita' del 3D */
 /* coloreFronte -> il colore del testo */
 /* coloreCorpo -> il colore della tridimensionalita' */
 function crea3D(div,testo,spessore,coloreFronte,coloreCorpo){
/* come prima cosa creaimo tanti testi quanto e' lo spessore */
  for(i=0;i<spessore;i++){
   $("#"+div).append("<p>"+testo+"</p>");
  }
/* definiamo le variabili dell'elemento e dei sui figli */
  var el = document.getElementById(div);
  var child = el.childNodes;
  var trasformaZ = 0;
/* sulla base della prospettiva trasliamo sul asse Z i nostri testi in modo da dare una profondita' alla scritta  */
/* e definiamo il colore del testo */
  for(i=0;i<spessore;i++){
   trasformaZ--;
   var trasformazione = "translateZ("+trasformaZ+"px)";
   child[i].style.webkitTransform = trasformazione;
   child[i].style.MozTransform = trasformazione;
   child[i].style.transform = trasformazione;
   child[i].style.color = coloreCorpo;
  }
  child[0].style.color = coloreFronte; /* (incompatibilita' riscontrata in IE la prima scritta non cambia colore) */
 }
 

 /* funzione per creare l'effetto movimento al passaggio del mouse (incompatibilita' riscontrata in Safari)*/
 /* argomento: div -> ID dell'elemento */
 function muovi3D(div){ 
/*come prima cosa definiamo le variabile della posizione dell'elemento , la sua dimensione e ne calcoliamo il valore in percentuale */
  var posizione = $("#"+div).position();
  var posTop = posizione.top;
  var posLeft = posizione.left;
  var larghezza = $("#"+div).width();
  var altezza = $("#"+div).height();  
  var posX = larghezza/100;
  var posY = altezza/100;  
  var el = document.getElementById(div);
/* catturiamo l'evento del movimento del mouse e modifichiamo l'origine della prospettiva dell'elemento */
  $("#"+div).mousemove(function(event){
   var coordY = event.pageY;
   var coordX = event.pageX;   
   var perspX = (coordX-posLeft)/posX;
   var perspY = (coordY-posTop)/posY;   
   el.style.perspectiveOrigin=perspX+"% "+perspY+"%";
  });
 }
 

 /* funzione per la cancellazione dell'effetto 3D */
 /* argomento: dic -> ID dell'elemento */
 function cancel3D(div){
  var elemento = "#"+div+" p";
  $(elemento).remove();
 }
 

 /* funzione per l'evento click sul testo */
 /* argomenti: div -> ID dell'elemento */
 /* testo1 -> il testo da scrivere nello stato OFF */
 /* testo2 -> il testo da scrivere nello stato ON */
 /* spessore -> la profondita' del 3D */
 /* colore1 -> il colore del testo nello stato OFF */
 /* colore2 -> il colore della tridimensionalita' nello stato OFF */
 /* colore3 -> il colore del testo nello stato ON */
 /* colore4 -> il colore della tridimensionalita' nello stato ON */
 function clicca3D(div,testo1,testo2,colore1,colore2,colore3,colore4,spessore){
  $("#"+div).click(function(){
   if(clickStatus==0){
    cancel3D(div);
    crea3D(div,testo2,spessore,colore3,colore4);
    clickStatus=1;
    /* inserisci qui la tua funzione (azione) per lo Stato ON*/
   }else{
    cancel3D(div);
    crea3D(div,testo1,spessore,colore1,colore2);
    clickStatus=0;
    /* inserisci qui la tua funzione (azione) per lo Stato OFF*/
   }
  });
 }
});
</script>
Ecco il DEMO di questa piccola guida.

Il codice e' completamente funzionante su Firefox , Chrome ed Opera ; IE11 e Safari riportano alcune incompatibilita'.

NLSweb