Style LinkButton as a regular HyperLink

3 posts, 0 answers
  1. Al
    Al avatar
    203 posts
    Member since:
    Oct 2006

    Posted 03 Sep 2015 Link to this post

    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. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 07 Sep 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Al
    Al avatar
    203 posts
    Member since:
    Oct 2006

    Posted 07 Sep 2015 in reply to Danail Vasilev Link to this post

    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;
    }
     

     

     

Back to Top