This is a migrated thread and some comments may be shown as answers.

Style LinkButton as a regular HyperLink

2 Answers 1264 Views
Button
This is a migrated thread and some comments may be shown as answers.
Al
Top achievements
Rank 1
Iron
Iron
Iron
Al asked on 03 Sep 2015, 01:55 PM

Hi 

Is there an easy way to style a LinkButton as a regular hyperlink? I would like the visuals of a HyperLink but have the event handling of the button

2 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 07 Sep 2015, 07:09 AM
Hi Al,

What I can suggest is that you try the following:
   - Remove the RadButton specific styles by removing its rbLinkButton class.
   - Set a css class through which you can add a border bottom and set a blue color to the text.

For example:

CSS:
<style>
    .myButton {
        color: blue;
        border-bottom: 1px solid blue;
    }
</style>

ASPX:
<script>
    function OnClientLoad(sender, args) {
        Sys.UI.DomElement.removeCssClass(sender.get_element(), 'rbLinkButton')
    }
</script>
<asp:HyperLink ID="Hyperlink1" NavigateUrl="http://www.bing.com" runat="server" Text="Navigate To" />
<telerik:RadButton ID="RadButton1" runat="server" ButtonType="LinkButton" NavigateUrl="http://www.bing.com" CssClass="myButton" Text="Navigate To" OnClientLoad="OnClientLoad" />



Regards,
Danail Vasilev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Al
Top achievements
Rank 1
Iron
Iron
Iron
answered on 07 Sep 2015, 07:42 AM

Thanks Danail,

I used this approach which also seems to work fine:

button.CssClass = "rbClearButton rbHyperlinkButton";
 

.rbClearButton,
.rbClearButton:hover {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    color: #000 !important; /* optional, depending on the background */
}
 
.rbHyperlinkButton {
    border-bottom: 1px solid blue !important;
    color:blue !important;
}
 

 

 

Tags
Button
Asked by
Al
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Danail Vasilev
Telerik team
Al
Top achievements
Rank 1
Iron
Iron
Iron
Share this question
or