Tutorial > Livello intermedio > Utilizzare CSS per creare un pulsante immagine
  
Utilizzare CSS per creare un pulsante immagine
Prerequisiti
Accesso a Vuforia Studio
Un file immagine
Passi
1. Aprire Vuforia Studio e creare un nuovo progetto Dispositivo mobile.
2. Trascinare e rilasciare un widget Pulsante nell'area di lavoro. Nel riquadro DETTAGLI, cancellare il campo Testo.
3. Fare clic su accanto a RISORSE nel riquadro PROGETTO per aggiungere il file immagine all'esperienza. In questo esempio useremo un'immagine per l'azione Riproduci.
4. Nel riquadro PROGETTO, fare clic su Applicazione in STILI.
Viene visualizzato l'editor degli stili dell'applicazione, dove si definiscono le classi CSS.
5. Nell'editor, immettere quanto segue:
.image-button, .image-button.activated {
background: rgba(0,0,0,0.0);
border-style: none;
background-repeat: no-repeat;
background-position: center;
}
.image-button.activated {
-webkit-filter: opacity(30%) drop-shadow(1px 1px 0px grey);
}
.image, .image.activated {
background-image: url(#{$resources}/Uploaded/play.png);
}
* 
Sostituire play.png con il nome del file immagine.
6. Dopo aver definito le classi CSS, fare clic su Salva. Al termine del salvataggio, fare clic su Home in VISTE per tornare all'area di lavoro.
7. Selezionare il pulsante nell'area di lavoro. Nel riquadro DETTAGLI, inserire quanto segue nel campo Classe:
image-button image
In questo modo vengono applicate le classi image-button e image al pulsante.