Vuforia Studio Tutorials and FAQs > Beginner > Use CSS to Style a 2D Button
  
Use CSS to Style a 2D Button
The Styles tab allows you to define CSS application styles for your Experience. Click the drop-down arrow next to Styles, and then click Application to display the style editor:
What You’ll Need
Access to Vuforia Studio
A ThingMark to associate your Experience to
Access to an Experience Service
Steps
1. Open Vuforia Studio, and create a new mobile project. Once Vuforia Studio opens, switch to the 2D canvas.
2. Drag and drop two Button widgets onto the canvas.
3. Select the first button on the canvas. Enter Play in the Text field.
Select the second button on the canvas. Enter Stop in the Text field.
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:
.my-button1 {
font-family: Century Gothic;
color: white;
background-color: green;
font-weight: bold;
font-style: italic;
}

.my-button2 {
font-family: Century Gothic;
color: white;
background-color: red;
font-weight: bold;
font-style: italic;
}
6. Once you’ve defined the CSS classes, click Save. Once the save is complete, click Home under VIEWS, and navigate back to the 2D canvas.
7. Click the Play button. Enter my-button1 in the Class field in the DETAILS pane.
Click the Stop button. Enter my-button2 in the Class field in the DETAILS pane.
Play around with the classes and try out different colors, fonts, and so on! For more information about different CSS styles, check out w3schools.com.