Remove Button Boundary

[Daniel]

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.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */


/*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.

[Danail Vasilev]

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

 

 

[Daniel]

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.