UI Toolkit for Runtime [Unity] 5/10 - UI elements, styles and stylesheets

Create a runtime interface of a simple game, using UI Toolkit - UIElements.

In this lesson:
- Using a first UI component - a button
- Creating a stylesheet and styles of the button in different states

0:00 In this section & lesson
0:16 Create a button and set its style
1:45 Create a stylesheet
3:34 Add the button style to the stylesheet
5:52 What is a class
6:44 Class variations - pseudo classes
8:02 Hover & active variations
11:36 Conclusion

---

Unity introduced the UI Toolkit (previously called UI Elements) to move
from the current UGUI and even older IMGUI to a new system,
based on standard web technologies: CSS and XML.

---

● Why learn UI Toolkit now?

It is still in a beta version, but you can already prepare for the future.
Unity has decided this new system will eventually become the main supported framework,
both for runtime and in the editor.

---

● In this tutorial you will:

- Learn the basic concepts of the modern UI framework, based on CSS and XML.
- Discover UI Builder to create UI documents and styles.
- Implement interactive elements, like buttons and labels.
- Create simple transitions between panels and screens.
- Learn how to connect data with the interface elements.

This tutorial is based on one project.

---

● Why learn from me?

I have been a Unity programmer for more than 5 years and delivered over 20 different projects.

I know how difficult it sometimes is to implement
new frameworks and technologies introduced by Unity.
Especially the ones that are still in a beta version.

---
⠀
⠀

[andrew.r.lukasik]

This is the best tutorial series for UI Toolkit so far, thanks!

[CreativeDeveloper]

Look forward to the next parts in this series!

[MatthewChowns]

Something that I ran into while following this is that the order that your ":active" and ":hover" show in your stylesheets affects their priority. So if you have hover below active and you set different background colors to each, the hover settings will take priority, which is counter-intuitive. I'm assuming this is because when you click the button, you are still hovering it, so it applies both and they apply in order so the last one sticks. You can drag and drop them to reorder.

[chris.davidoff]

Will you be doing more? These are great!!

[MaverX]

And how can I do the opossite of "UnSet"? I mean I want to add those changes I made in the inline style to the USS class and then apply it to all elements with the uss clase

[cheery-hex]

If anyone can't get pseudo classes to preview, check that you have a colon : before hover for ie Button :hover I was missing the colon and it wouldn't work

[AlmalykBeer]

Just compare perfomance uGUI and UI Builder. This is enough to forget about the builder for another couple of years.