There are some NiceButtons with various configurations.

"Apple Gradient" Styles

Some buttons with the "gradient" combination. By default a NiceButton has the "apple_gradient_gray" ButtonStyle setted.
So, for these, I simply wrote:

<rec:NiceButton ID="btnAG1" runat="server" Text="ok" />
<rec:NiceButton ID="btnAG2" runat="server" ButtonStyle="apple_gradient_blue" Icon="exclamation" Text="click me" />
<rec:NiceButton ID="btnAG3" runat="server" ButtonStyle="apple_gradient_green" Text="cancel" />
<rec:NiceButton ID="btnAG4" runat="server" ButtonStyle="apple_gradient_orange" Text="meh" />
<rec:NiceButton ID="btnAG5" runat="server" ButtonStyle="apple_gradient_yellow" Text="Hi, I'm a yellow button" />
<rec:NiceButton ID="btnDisabled" runat="server" Text="disabled button" Enabled="false" />

No css, no javascript, no image to set, just an Asp.Net tag! All the resources needed by buttons are embedded in the dll, and automatically retrieved by the page.
In the second button I've setted the "exclamation" icon, by default it reads icons from the embedded Silk icon set.


"Apple Gloss" Styles

A little variation of the previous theme.


"Big" Styles

Some big buttons. In these examples I've uses the LED icon set embedded with NiceButton, I think it's perfect for this size.

You can redefine the css properties of a button simply using its webcontrol attribute, for example the previous blue button has a specific font-size (and works as HyperLink instead LinkButton), the code is:

<rec:NiceButton ID="btnBig2" runat="server" NavigateUrl="http://www.recoding.it" Target="_blank" 
                ButtonStyle="big_blue" Font-Size="1.1em" 
                IconSet="Led" Icon="add">blue button with Font-Size</rec:NiceButton>

I've just used Font-Size, NavigateUrl and Target. It's so simple!


"Medium Square Gray" Style


Custom style button and icon

So you want to design your own button style?

In this case I've not used an embedded button style, but an external image for the background, setting proper Height and Padding (for left and right offset) properties, and ForeColor to White.
I've also set an external icon.

<rec:NiceButton ID="btnCustom1" runat="server" ForeColor="#ffffff" ButtonBackgroundImageUrl="~/images/custom.gif" 
                IconUrl="~/images/blue_info.gif" ButtonStyle="custom" 
                Height="35" Padding="16" Text="button with custom style" />

The bg image and the icon are gifs, so this button can be used also with IE6.


Additional classes

If you define a CssClass on the control, it will be mantained on page render, so you can use it to redefines some css properties, like the text appearence:

.whiteText { color: White !important; font-weight: bold; }
<rec:NiceButton ID="btnClass" runat="server" CssClass="whiteText" ButtonStyle="apple_gloss_blue" 
                Text="blue and white" />

Standard behaviour

NiceButton is built upon the standard .NET LinkButton, and inherits all its capacity, like commands and validation.

<rec:NiceButton ID="btnTest1" runat="server" Text="click me to do a postback" CommandName="myCommand" 
            CommandArgument="42" OnCommand="btnTest1_OnCommand" />
<rec:NiceButton ID="btnTest2" runat="server" Text="or me" CommandName="otherCommand" 
            CommandArgument="69" OnCommand="btnTest2_OnCommand" />
<asp:Label ID="lblTest" runat="server" />

<rec:NiceButton ID="btnValidate" runat="server" Text="I need this value ->" 
            ValidationGroup="vgExample" CausesValidation="true" />
<asp:TextBox ID="txtRequired" runat="server" />

<asp:RequiredFieldValidator ID="refRequired" runat="server" ControlToValidate="txtRequired" 
            ErrorMessage="the field is missing" Display="Dynamic" ValidationGroup="vgExample" />

Design-time support

You can use this control even in the VS Designer, it renders a nearly perfect preview (but, for now, preview only works OUTSIDE bindable controls, sorry :) [anyway the control WORKS perfectly inside a bindable control]).

design time preview
icons by famfam and LED