Telerik Extensions for ASP.NET MVC

Telerik Extensions for ASP.NET MVC provide styles for different types of reusable buttons. These buttons are not extensions on their own and can be used simply by adding appropriate generic HTML markup to the page, and registering one of the provided skins together with the common CSS file.

Simple Buttons

For example, if you register telerik.common.css and telerik.forest.css on the page and use the following code...

CopySimple Buttons
<input class="t-button" type="button" value="input type="button"" />
<button class="t-button" type="button">button type="button"</button>
<a class="t-button" href="#">anchor / hyperlink</a>
<div class="t-button">div</div>

... you will get buttons that look like this:

Buttons Intro

The provided CSS styles will make any HTML element with a t-button CSS class look pretty much the same - namely, like an auto-sized push button with inline-block behavior. Hover styles are also available out-of-the-box, except for non-anchor elements in IE6-.

Image Buttons

Image buttons are commonly used. In this case the required CSS classes are t-button t-button-icon:

CopyImage Buttons with Built-in Icons
<button class="t-button t-button-icon" type="button"><span class="t-icon t-refresh"></span></button>
<a class="t-button t-button-icon" href="#"><span class="t-icon t-update"></span></a>
<div class="t-button t-button-icon"><span class="t-icon t-cancel"></span></div>

Using the Windows7 skin, the resulting output will be:

Buttons Icon

In addition to icons from the Telerik MVC suite, you can also use any icon as an img element:

CopyImage Buttons with Custom Icons
<button class="t-button t-button-icon" type="button"><img src="..." alt="rss icon" /></button>
<a class="t-button t-button-icon" href="#"><img src="..." alt="rss icon" /></a>
<div class="t-button t-button-icon"><img src="..." alt="rss icon" /></div>

Buttons Custom Icon

Image and Text Buttons

Taking a step further, you can use buttons with both an icon and text inside. This is achieved by applying CSS classes t-button t-button-icontext:

CopyImage and Text Buttons
<button class="t-button t-button-icontext" type="button"><span class="t-icon t-refresh"></span>Refresh</button>
<a class="t-button t-button-icontext" href="#"><span class="t-icon t-update"></span>Update</a>
<div class="t-button t-button-icontext"><span class="t-icon t-cancel"></span>Cancel</div>

Buttons Icon Text

Buttons With no Borders and Background

You may want to remove the buttons' background and borders, and only leave the icon and/or text ("bare buttons")). Regardless of the button configuration, you can achieve this by appending a t-button-bare CSS class:

CopyButtons with no borders and background
<button class="t-button t-button-icontext t-button-bare" type="button"><span class="t-icon t-refresh"></span>Refresh</button>
<a class="t-button t-button-icontext t-button-bare" href="#"><span class="t-icon t-update"></span>Update</a>
<div class="t-button t-button-icontext t-button-bare"><span class="t-icon t-cancel"></span>Cancel</div>

Buttons Bare

Buttons Expanding to 100% Width

A button of the above types can be made 100% wide by appending a t-button-expand CSS class. In this case the button will resize together with its parent element. The CSS class also removes any side margins that might be applied.

CopyButtons with no borders and background
<button class="t-button t-button-expand" type="button">Refresh</button>
<a class="t-button t-button-expand" href="#">Update</a>

See Also