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
    1502 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. 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