CSS3 - Playful Buttons for Game Interfaces
If you are creating an HTML5-based game then you want to create the illusion that you are running an application instead of just loading a web page. There are many techniques that can spruce up your user interface and give it a playful twist. Once I saw the kinds of things CSS3 can do to elements on the screen, I knew that it was only a matter of time before they were used in games. In Part 2 of my series on creating Game-Like interfaces we look at Buttons. I borrowed the awesome buttons from Zurb because they are indeed… Awesome! This is an example of using what you find instead of trying to rebuild the world. Lots of people out there would be tickled to death if you were to use their code! So I recommend you do a bit of searching before you begin constructing your own interfaces.
What I want to impart here is this – create subtle yet playful effects that help your player quickly choose the item they want and move on. Basically all I had to do here is set up two classes – one to slowly rotate the button back and forth, and one to make the button get slightly larger and smaller. I had to wrap each of the anchors with another element because you cannot do two different transforms on the same element — basically a limitation of CSS since it’d by like making an element have both a red background and blue background at the same time – it just wont work. Anyway, I used some YUI3 wiring to create a delegate watcher that looks for a mouseover or mouseout and sets a class on the a, and another class on the parent of the a – the div.
Another thing to note, I made the animations for rotation and scaling slightly out of phase – it gives the buttons a more organic feel and allows the button to change in a more interesting fashion. There are several things you could do to improve this interaction – including making a more smooth transition from mouseover to mouseout with another transition. If you use this code, please let me know!