Construct 2 Prettier Buttons

2

Stats

4,887 visits, 7,495 views

Tools

Translations

This tutorial hasn't been translated.

License

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.

Published on 12 Feb, 2013. Last updated 19 Feb, 2019

Preface: You are better off creating your own buttons than using Construct 2's button object, especially if you plan on exporting your game to CocoonJS/DirectCanvas (where they will no longer work). This is for if you still choose to use the Button object, and want to style the buttons.

The default button style for most browsers usually makes me cringe - especially in games. Fortunately, since Construct 2 is just using your standard <input type='submit' ... /> buttons (DOM buttons rather than generated in the canvas), it's easy to customize with a bit of CSS.

Before:

After:

With the CSS below, it's a fairly small change, but the added transparency and effect on the mouseover make it look a bit more like it belongs there.

Here is some CSS to get you started.

    input[type=button] {
        background: #FFFFFF;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='[h2]FFFFFF', endColorstr='[/h2]DEDEDE');
        background: -webkit-gradient(linear, left top, left bottom, from([h2]FFFFFF), to([/h2]DEDEDE));
        background: -moz-linear-gradient(top,  [h2]FFFFFF,  [/h2]DEDEDE);
        background: -ms-linear-gradient(top,  [h2]FFFFFF,  [/h2]DEDEDE);
        background: -o-linear-gradient(top,  [h2]FFFFFF,  [/h2]DEDEDE);
        color: #000;
        border: 1px solid #666;
        opacity: 0.80;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=80);
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        border-radius: 3px;
        padding: 5px;
        font-size: 0.7em !important;
        line-height: 0.8em;
    }        
    input[type=button]:hover {
        opacity: 1.0;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
    }    
    input[type=button]:active {
        background: #FFFFFF;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='[h2]DEDEDE', endColorstr='[/h2]FFFFFF');
        background: -webkit-gradient(linear, left top, left bottom, from([h2]DEDEDE), to([/h2]FFFFFF));
        background: -moz-linear-gradient(top,  [h2]DEDEDE,  [/h2]FFFFFF);
        background: -ms-linear-gradient(top,  [h2]DEDEDE,  [/h2]FFFFFF);
        background: -o-linear-gradient(top,  [h2]DEDEDE,  [/h2]FFFFFF);
    }
 

Click here for a quick guide on CSS. The easiest place to start tweaking that is the hex colors. Use a tool like this to pick colors you would like, and note that most of the above are gradients (so you will need to pick 2 similar colors).

Placing in index.html file

You'll want to place this in your index.html file right before the </style> tag. The problem with this technique is you will have to do this each time you update and export your game.

Dynamically inserting CSS with Clay.io

If you are using the Clay.io Plugin:

1) Visit the developer dashboard

2) Click "Settings" for your game

3) Scroll to the bottom and click "Add Unframed CSS"

4) Paste in the above CSS and save

Now you don't need to modify index.html, and the CSS will automatically be added when your game is loaded.

If you are not familiar with Clay.io, we help distribute your games (see tutorial), as well as a plugin for implementing features like user accounts, high scores, achievements, analytics, posting to Facebook/Twitter, and more (see tutorial).

  • 0 Comments

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