PDA

View Full Version : Simple: How to get Toolbar style (transparent background) button anywhere?



JakeL
30 Mar 2012, 3:02 PM
Hi All -

I'm sure this is trivial, but I don't have the CSS know-how to pull it off it appears.

I have a series of buttons used throughout our application that are just images, with no text. Some are split buttons They appear on different backgrounds. I'd like for the buttons to have a transparent background, and have the nice box mouse over effect, much as they appear on the toolbar.

Is there a way to apply the toolbar button appearance to a button outside of a toolbar?

My reasoning for trying to use the button class is the frequency of "split" buttons, which makes using the button's built-in split functionality desireable.

Thank you,

-Jake

mitchellsimoens
31 Mar 2012, 8:51 AM
CSS is the way to go here unfortunately.

JakeL
31 Mar 2012, 4:00 PM
Mitchell -

Any pointers on how to get started? Can I try to steal the classes from the toolbar button using .addCls and .removeCls, or is it going to take custom CSS classes?

-J

skirtle
31 Mar 2012, 8:54 PM
I see a couple of options.

You could try doing it properly using Sass. Styling buttons the way you want should (theoretically at least) be a simple 'ui'. Take a look at the button Sass. You'll see that it calls a function 6 times: that's the 3 scales (small, medium and large) in both toolbar and non-toolbar forms. You should be able to adapt accordingly.

If you want to go down the trickery route, everything is just CSS so you should be able to add the relevant CSS classes and normal buttons will be tricked into believing they are in a toolbar. You may need to wrap them in extra elements to hang the styles off, which won't be very efficient but it should be effective. A quick dig using a debugger should point you towards the CSS classes you need.