New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Creating a Floating Save Button with RadFloatingActionButton for ASP.NET AJAX


Property Value
Product RadFloatingActionButton for ASP.NET AJAX
Version all


To implement a floating save button on your page using Telerik UI for ASP.NET AJAX, you can use either the RadButton or the RadFloatingActionButton. Each control has its own features and styling options.

Solution with RadButton

Add the RadButton control to your page and configure it with custom CSS to make the button float and follow the user as they scroll.

    .floating-save-btn {
        position: fixed;
        bottom: 25px;
        right: 80px;
        z-index: 1000;

<telerik:RadButton ID="RadButtonSave" runat="server" Text="Save" CssClass="floating-save-btn"></telerik:RadButton>

To show a save icon, add the <Icon> inner tag to the RadButton control.

<telerik:RadButton ID="RadButtonSave" runat="server" Text="Save" CssClass="floating-save-btn">
    <Icon PrimaryIconCssClass="rbSave"></Icon>

Solution with RadFloatingActionButton

Add the RadFloatingActionButton control to your page and set the PositionMode property to "Fixed" so that it scrolls with the user. Additionally, set the Icon property to "save" to load a Save icon.

<telerik:RadFloatingActionButton runat="server" ID="FabSpeedDial" Icon="save" PositionMode="Fixed">
In this article