Vuforia Studio Tutorials and FAQs > Intermediate > Use CSS to Create an Image Button
Use CSS to Create an Image Button
What You’ll Need
Access to Vuforia Studio
An image file
1. Open Vuforia Studio, and create a new mobile project.
2. Drag and drop a Button widget onto the canvas. In the DETAILS pane, clear the Text field.
3. Click the next to RESOURCES in the PROJECT pane to add the image file to your experience. For this example, we’ll use a play image.
4. From the PROJECT pane, click Application under STYLES.
The application styles editor appears. This is where you define your CSS classes.
5. Enter the following in the editor:
.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);
Replace play.png with the name of your image file.
6. Once you’ve defined the CSS classes, click Save. Once the save is complete, click Home under VIEWS to return the canvas.
7. Select the button on the canvas. In the DETAILS pane, enter the following in the Class field:
image-button image
This will apply the image-button and image classes to the button.