The following files have been attached to this tutorial:
This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.
This tutorial has been completely re-written to incorporate a lesson I picked up in the forums recently. If you're really interested in the legacy technique then you can look at the review history of this tutorial and open up the deprecated group in the capx example. So, without further delay:
There are plenty of websites that will create css effect code for you. So, go to a website like cssportal and create a good effect for your UI. Copy the code into a blank document and save it as a .css file.
It will look something like this:
Paste the copied code into your new .css file. The code used in this example is shown above. To make it work you will have to replace the ".testbutton" with the ID that is used in the button object properties, as shown here:
If you have not downloaded the capx - now's the time!
You will see that a file named "style.css" has been loaded into the project. Double click on it and you will see the same data that is shown here with the ID "MyButton" substituted. On the start of the layout, the example simply uses the Text Object load webfont function to load the style.css into the ID parameter "MyButton". The "MyButton" parameter is a name that I made up - you could use anything that doesn't conflict with css here. And that's it - it's a nifty trick and I hope this helps!!!
You should end up seeing a blue button like this:
It's a very good example, you only need in Construct 3:
Add Action / Button / Set CSS style
If you create a new action for each option you can change the style. You can copy the options from CSSPORTAL.
Thanks for the tutorial!!
It does not work, in Construct 3 text has no webfont ...
But you can do it!
The demo is C2 only...