CSS Your Buttons and Textboxes

  • 46 favourites

Attached Files

The following files have been attached to this tutorial:



Download now 176.26 KB


12,049 visits, 20,100 views



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 is the simplest way to add css effects to your buttons

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:

Create a css effect you like

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:

Inside the capx

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:



Download now 176.26 KB

  • Order by
Want to leave a comment? Login or Register an account!