logo
down
shadow

Bootstrap keep button other border gradient when removing border-left


Bootstrap keep button other border gradient when removing border-left

By : user2955415
Date : November 22 2020, 10:40 AM
I wish did fix the issue. Input elements in Bootstrap also have box-shadow. You can use Firebug to inspect the element, to see this. To demonstrate, here's the default markup for a search group (slightly tweaked, since I prefer Font Awesome to Glyphicons):
code :
<div class="input-group">
    <input type="text" class="form-control" placeholder="Search for..." />
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">
            <i class="fa fa-search"></i>
        </button>
    </span>
</div>
box-shadow: rgba(0,​ 0,​ 0,​ 0.075) 0px 1px 1px 0px inset
.search-input
{
    box-shadow: none;
}


Share : facebook icon twitter icon
Removing blue border around Contact Button, using Bootstrap 3

Removing blue border around Contact Button, using Bootstrap 3


By : Idris Fakiri
Date : March 29 2020, 07:55 AM
this one helps. I've been implementing Bootstrap 3 onto my website, and I am currently experiencing this issue after having selecting the Contact button and closing the pop-up window that comes up: , Check this
code :
input[type="button"]:focus, 
input[type="submit"]:focus {    
    outline: none !important;   
 } /* for forms */ 

a:focus { 
    outline: none !important;
 } /* for anchor */
-webkit-border-image: -webkit-linear-gradient only for left border

-webkit-border-image: -webkit-linear-gradient only for left border


By : user6875193
Date : March 29 2020, 07:55 AM
it helps some times Here CSS: , Make it like 2 absolute and inline-block's:
CSS
code :
.menu {
    position: absolute;
    display: inline-block;
    margin-left: 100px;
}
.menu:before {
    content: " ";
    display: inline-block;
    position: absolute;
    height: 100%;
    border-left: 1px solid;
    border-image: linear-gradient(to top, transparent, #f9f9f9 20%, #f9f9f9 80%, transparent) 0 0 0 1;
    border-image: -webkit-linear-gradient(top, transparent, #f9f9f9 20%, #f9f9f9 80%, transparent) 0 0 0 1;
    border-image: -moz-linear-gradient(top, transparent, #f9f9f9 20%, #f9f9f9 80%, transparent) 0 0 0 1;
    -webkit-border-image: -webkit-linear-gradient(top, transparent, #f9f9f9 20%, #f9f9f9 80%, transparent) 0 0 0 1;
}
Bootstrap 3 button icon with border on the left

Bootstrap 3 button icon with border on the left


By : User123
Date : March 29 2020, 07:55 AM
like below fixes the issue There is a padding in the button that you either need to remove and place the contents of the button in the vertical center manually, or add the following CSS rules to your class to counter the effect of the padding using negative margin (you may have to play around with the value a bit until it looks right) :
code :
a.btn.btn-xlg i {
    /* the other attributes... */

    /* set the icon height to the button height */
    height: 34px;
    /* pad the icon to be at the center instead of the top */
    padding: 9px 4%;
    /* adjust the negative margins to counter the padding effect */
    margin-top: -8px;
    margin-bottom: -6px;
}
How to make a button with no border (gradient background) the same size as a button with a border (outline)?

How to make a button with no border (gradient background) the same size as a button with a border (outline)?


By : user3064754
Date : March 29 2020, 07:55 AM
Does that help You need to increase background-size to cover also the borders, else, you'll see it repeating:
code :
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #074c81;
    border-color: #074575;
}
.btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-primary:hover {
    color: #fff;
    background-color: #08548d;
    border-color: #074c81;
}
.btn:hover {
    color: #58595b;
    text-decoration: none;
}
button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) {
    cursor: pointer;
}
.Button_root__2FLmr:hover, .Button_root__2FLmr:active, .Button_root__2FLmr:focus {
    outline: none !important;
    box-shadow: none !important;
}
.DrawerGroup_root___Kf5l button {
    margin: 1rem 1rem 0 0 !important;
}
.btn-primary {
    color: #fff;
    background-color: #0a69b1;
    border-color: #0a69b1;
    box-shadow: none;
}
.btn {
    display: inline-block;
    font-weight: 400;
    color: #58595b;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 2px solid transparent;
    padding: 0px 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 9px;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
}
.Button_gradientBackground__2z0L9 {
    background-color: #279DD9 !important;
    background-image: linear-gradient(-60deg, #279DD9, #1169B2);
    border: 2px solid transparent !important;
    background-position:center;
    background-size: calc(100% + 4px);/* or 101% is also fine */
}
.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
}
.Button_root__2FLmr {
    padding: 2px 1rem !important;
    min-width: 7rem;
    white-space: nowrap;
}
<div class="DrawerGroup_root___Kf5l">
  <button type="button" class="Button_root__2FLmr Button_gradientBackground__2z0L9 btn btn-primary">save</button>
  <button type="button" class="Button_root__2FLmr btn btn-outline-secondary">cancel</button>

</div>
Removing a border line in Silverlight Border control (kind of like border-style-bottom:none in css)?

Removing a border line in Silverlight Border control (kind of like border-style-bottom:none in css)?


By : misiu9091909
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , I'd like the ability to have something that looks like a border but I don't want the bottom to show. in CSS I could accomplish this by going border-style-bottom:none I'm wondering if Silverlight has a similar functionality for the Border control. , It works like this:-
Related Posts Related Posts :
  • CSS Media Queries not kicking in when there supposed to
  • Video JS - poster image cover/contain
  • center the div absolute using css but i cannot figure out why its not moving to centre
  • simple css code, i dont understand
  • Autoformatting LESS code with vim
  • Can we use different CSS language/pre processors for different components in a Angular Project
  • combined multiple classes into one css rule
  • Detect mobile device browsers, not only screen width
  • CSS folded corners of div with shadow
  • bootstrap 3: why do my <div>s stack from 992 px width onwards when using "col-sm-6"
  • IE7, IE8 support for css3 media query
  • Gradient ends are blurry when using pixel measurements
  • display bootstrap popovers outside divs with overflow:hidden
  • How to make a non responsive site by using Bootstrap?
  • Selecting an element that doesn't have a child with a certain class
  • Embedded Twitter Widget Height issue
  • Twitter Bootstrap - How to get buttons to be block level only on extra small and small devices
  • How can I add a vertical scrollbar to my div automatically?
  • Trouble changing the link font color using typography.js in gatsby
  • Nesting up scss with main.scss and subcomponent scss files
  • Why does my FontSquirrel font not work?
  • Div positioning (overlays when not wanted)
  • Align button vertically in alert field
  • CSS: display: flex and text ellipsis on the same element
  • Fixed position buttons appearing in incorrect area depending on browser
  • CSS-menu issue in angular project
  • Responsive Website - general enquiries
  • Webkit Scrollbar Buttons only showing horizontal
  • explicitly set a field's width in css to "no-auto"
  • Jekyll accessing page variables from CSS
  • Why did my #wrapDesktopNavBar disappear on desktop view?
  • CSS Menu Multiple Hover Colo(u)rs
  • Line-height works differently on Mac and Windows
  • Resizing an image at will with CSS?
  • CSS Naming Best Practice in MVC Layouts
  • FireFox & Chrome CSS Differs
  • Gradient Border Causing the Border to Disappear
  • How to hide column label on google chart
  • How to change H3 color in bootstrap using CSS file
  • CSS How to align checkbox image
  • css3 jagged edge on left isntead of right
  • display text in a horizontal line , using ng-repeat and bootstrap
  • Css right top corner
  • Getting divs in the right postion
  • Rails 4: Sass raises SyntaxError when precompiling assets on server but not on development computer
  • Boostrap css file overrode my css file
  • Why are placeholder selectors inside @keyframes valid .scss?
  • Create a 4x4 responsive grid of squares with a margin of 20px on each side of the container?
  • CSS Not Selector: Select All Except Inside of Element
  • CSS Intellisense for files not in solution
  • Overlapping Anchor Tags When Hovering Over One
  • Any way to keep Susy from changing font-size automatically?
  • In Chrome’s user agent stylesheet, why use "-webkit-margin-before" et al instead of just "margin-top"
  • Responsive slanted border
  • SCSS variables - same name, different value in different media breakpoints
  • How to create overlay over div without defining it in HTML
  • Using negative values fails the execution in SASS
  • up/down arrow key issue with typeahead control (angular bootstrap UI)
  • increase size of search terms in a magento site by applying css class-name
  • Inline elements not collapsing whitespace before the end of the tag, in modern browsers?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org