Remove Button Boundary

3 posts, 1 answers
  1. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 03 Nov 2014 Link to this post

    Hello,

    I am working on a project with RadButton.
    I'm trying to add a style to the button so it looks like a Bootstrap.
    I added to it a ContentTemplate and inserted the style inside it.
    How can I remove the button’s Boundary/border?

    p.s.
    I added a div next to it. The Telerik button should look like the div.

    CSS:
            /*! cut from:
     * Bootstrap v3.1.1 (http://getbootstrap.com)
     * Copyright 2011-2014 Twitter, Inc.
     */
     
     
    /*bootstram theme:*/
    .btn-default,
    .btn-primary,
    .btn-success,
    .btn-info,
    .btn-warning,
    .btn-danger {
      text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
      -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
              box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
    }
    .btn-default:active,
    .btn-primary:active,
    .btn-success:active,
    .btn-info:active,
    .btn-warning:active,
    .btn-danger:active,
    .btn-default.active,
    .btn-primary.active,
    .btn-success.active,
    .btn-info.active,
    .btn-warning.active,
    .btn-danger.active {
      -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
              box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    }
    .btn:active,
    .btn.active {
      background-image: none;
    }
     
    .btn-primary {
      background-repeat: repeat-x;
        border-color: #2b669a;
        background-image: linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%);
    }
    .btn-primary:hover,
    .btn-primary:focus {
      background-color: #2d6ca2;
      background-position: 0 -15px;
    }
    .btn-primary:active,
    .btn-primary.active {
      background-color: #2d6ca2;
      border-color: #2b669a;
    }
     
    /*  bootstrap:*/
    /*! normalize.css v3.0.0 | MIT License | git.io/normalize */
    .btn > .caret,
      .dropup > .btn > .caret {
        border-top-color: #000 !important;
      }
     
     
    .btn {
      display: inline-block;
      padding: 6px 12px;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: normal;
      line-height: 1.42857143;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
      background-image: none;
      border: 1px solid transparent;
      border-radius: 4px;
    }
    .btn:focus,
    .btn:active:focus,
    .btn.active:focus {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }
    .btn:hover,
    .btn:focus {
      color: #333;
      text-decoration: none;
    }
    .btn:active,
    .btn.active {
      background-image: none;
      outline: 0;
      -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
              box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    }
    .btn.disabled,
    .btn[disabled],
    fieldset[disabled] .btn {
      pointer-events: none;
      cursor: not-allowed;
      filter: alpha(opacity=65);
      -webkit-box-shadow: none;
              box-shadow: none;
      opacity: .65;
    }
     
    .btn-primary {
      color: #fff;
      background: #428bca;
      border-color: #357ebd;
    }
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary {
      color: #fff;
      background: #3276b1;
      border-color: #285e8e;
    }
    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary {
      background-image: none;
    }
    .btn-primary.disabled,
    .btn-primary[disabled],
    fieldset[disabled] .btn-primary,
    .btn-primary.disabled:hover,
    .btn-primary[disabled]:hover,
    fieldset[disabled] .btn-primary:hover,
    .btn-primary.disabled:focus,
    .btn-primary[disabled]:focus,
    fieldset[disabled] .btn-primary:focus,
    .btn-primary.disabled:active,
    .btn-primary[disabled]:active,
    fieldset[disabled] .btn-primary:active,
    .btn-primary.disabled.active,
    .btn-primary[disabled].active,
    fieldset[disabled] .btn-primary.active {
      background: #428bca;
      border-color: #357ebd;
    }
    .btn-primary .badge {
      color: #428bca;
      background: #fff;
    }
     
    btn-primary
    .dropdown-toggle:focus {
      outline: 0;
    }
     
    .btn .caret {
      margin-left: 0;
    }
     
    .btn .label {
      position: relative;
      top: -1px;
    }
     
     
    .btn .badge {
      position: relative;
      top: -1px;
    }
     
    .caret {
      display: inline-block;
      width: 0;
      height: 0;
      margin-left: 2px;
      vertical-align: middle;
      border-top: 4px solid;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
    }
     
     
     
    /*doc style*/
            .Grid {
                border-bottom:1px solid black;
                border-top:1px solid black;
                background-color:lightblue;
                height:35px;
            }

    ASPX:
    <div id="Grid" class="Grid">
         <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton">
             <ContentTemplate>
                 <span class="btn  btn-primary">
                 <asp:Label ID="Label1" runat="server" Text="telerik button"></asp:Label>
                     </span>
             </ContentTemplate>
         </telerik:RadButton>
           <asp:Literal >          </asp:Literal>             
         <div id="button_Like" class="btn  btn-primary">
             <asp:Label ID="Label2" runat="server" Text="div like button"></asp:Label>
         </div>
     </div>


    Thanks,
    Daniel.
  2. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 05 Nov 2014 Link to this post

    Hello Daniel,

    You can use the following CSS:
    html span.RadButton.RadButton_Default.rbLinkButton {
        padding: 0 4px;
        background-color: lightblue;
        border: none;
    }



    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 06 Nov 2014 in reply to Danail Vasilev Link to this post

    Hi Danail Vasilev,

    Thank you for your response.

    Apparently I did not explain myself properly,
    However, following your answer, I managed to reach a solution.

    Code:
    html span.RadButton.RadButton_Default.rbLinkButton {
        padding: 0 0;
        background-color: transparent;
        border: none;
    }


    Thanks,
    Daniel.
Back to Top