Style LinkButton as a regular HyperLink

3 posts, 0 answers
  1. Al
    Al avatar
    215 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
    1502 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. Al
    Al avatar
    215 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