Playing with sass and fancy-buttons

Before giving the second part of [my last post, a quick how-to to add great looking buttons in your applications with sass (an extension of CSS3) and fancy-buttons (an easy way to design CSS buttons in seconds) .

there a sass module in play. Just type the following line to get the module. It comes with fancy-buttons embedded.

play install sass

Don’t forget to run eclipsify (or the command of your IDE) again and refresh Eclipse (your IDE). I’ll make this how-to on my datepicker project (from previous post).

Add the module to your application in conf/application.conf :

module.sass=${play.path}/modules/sass-head

Not you just have two files to modify.

Create the sass stylesheet (main.sass) in /public/stylesheets. Import fancy-buttons and "style" your submit button :

@import fancy_buttons.sass

input[type=&quot;submit&quot;]
    +fancy-button

Really simple, isn’t it ?

Add the call to the stylesheet in main.html :

<link rel=&quot;stylesheet&quot; href=&quot;@{'public/stylesheets/main.sass'}&quot; type=&quot;text/css&quot;>

And, voilà :

Figure 1. A form with fancy-buttons

I’ll let your change the look : see more on author site.