I have two buttons next to each other. One of them has a background and the other has a transparent background with a border. The problem is the border is visually outside the button, making it slightly larger than the primary button.
I have searched and come across many solutions for this, but my question is what is the best practice to solve this?
Thanks!
use box-sizing
box-sizing: border-box;
This way the padding, border will be inside.
You have two options, one is to use outline and outline offset, like this:
button{
outline: 1px solid red;
outline-offset: -1px;
}
Or you can use an inset box-shadow, like this:
button{
box-shadow: inset 0px 0px 1px red;
}
Related
I'm having trouble styling two different styles of buttons. The first button should be a transparent background with a 2px border, and the next button is just foundation's default styling for buttons, i.e. no border. I thought that *{box-sizing: border-box;} would make it so that the buttons would come out to the same size regardless of padding/border/margin. I thought that maybe this wasn't working because I wasn't specifying a width/height, but even when I do that it just has the effect of pushing the normal button off alignment by 2px, and even still I want the buttons to be the natural width according to the text inside of them.
The easy solution for me is to just add a border on the normal button with the same color as the background, but then I end up having to also add styles for the border for hover, active, etc... just seems like there should be a better way. Am I doing something wrong here?
Here is a jsfiddle of where I'm at: http://jsfiddle.net/xa4d4bfv/
How about adding a border with transparent color.
a.button {
border: 2px solid transparent;
}
button outline class should be the following
.button-outline {
border:2px solid #222;
color: #222;
background-color: rgba(0,0,0,0.0);
padding: 0.9rem 2rem 0.9rem 2rem !important;
}
Suslov's answer is pretty good though, mine's alright if you leave the button the same size
I have this JSFiddle
<div class="boo">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
CSS
.boo{
border-left: 12px ridge red;
}
and i want to customize the two colors. I tried to put this outline-color:12px solid darkblue in the class boo but it doesn't work..
To obtain two distinct colours for a 12px left border, just give a 6px-wide red left border for .boo element and another 6px.wide blue left border for the inner paragraph
example fiddle: http://jsfiddle.net/uyTd7/1/
CSS
.boo {
border-left: 6px solid red;
}
p {
border-left: 6px solid blue;
}
But this will work until you have two elements and no margin or padding between: if you had one single element (e.g. a <p>) you could reach the same result on modern browser using box-shadow property (with vendor prefixes where necessary), e.g.
p {
border-left: 6px solid red;
box-shadow: -6px 0 0 blue;
}
example fiddle: http://jsfiddle.net/7cq78/1/
There are several ways you can add another 'border'
1. Using outline (wont work with rounded corners though)
http://www.w3schools.com/css/css_outline.asp
2. Using :after & :before
:after and :before lets you create a whole new element with fully customize-able border (and outline). The limit is your creativity
3. Border style & image
There are many kind of border style such as solid, dashed, dotted, ridge etc. Also you can just easily use repeating image for your border
try this
.boo{
border-left: 12px solid red;
outline:12px solid darkblue ;
}
p{
padding-left:10px;
}
one limitation is IE6 and IE7 don't support the outline property.
I am trying to create a button with 3 layers of border around it with the middle layer showing the background of the containing div. Examples are worth a thousand words so here you go
http://jsfiddle.net/e5Sxt/2/
html
<div id="content">
<p>Generic Content</p>
<button class="button">Search</button>
</div>
css
#content{
width: 500px;
height: 500px;
background-color: black;
padding: 50px;
color: white;
}
button{
margin-top: 50px;
padding: 20px;
text-align: center;
background-color: #333;
box-shadow: 0 0 0 5px #666, 0 0 0 10px red, 0 0 0 15px #bbb;
border: none;
cursor: pointer;
}
The red box-shadow is where the black of the containing div should come through. If the box-shadow is set to transparent for this layer, the box-shadow under it shows through instead.
I have tried utilizing outlines, borders, and box-shadows to no avail so far. As of right now, I think I will have to wrap the button in another div with the outer border and a padding to show the background, but wanted to see if anyone could do this without adding another html element.
Thanks!
The answer depends on what browsers you need to support (and whether you'd be happy with a fall-back solution for older browsers).
There is a CSS feature called border-image, which, frankly, can do pretty much anything you could think of for a border. You could achieve this effect very easily using this style.
With border-image, you could simply specify a small image with your two colours and transparent middle section. Job done.
Learn more about border image here: http://css-tricks.com/understanding-border-image/
However... there is a big down-side: browser support. border-image is a relatively new addition to the CSS spec. Firefox and Chrome users should be okay, but IE users miss out -- this feature didn't even make it into IE10.
Full browser support details can be found here: http://caniuse.com/#search=border-image
If poor browser support for border-image is enough to kill that idea for you, then another viable answer would be to use :before or :after CSS selectors to create an pseudo-element sitting behind the main element. This would have a transparent background and be sized slightly larger than the main element and with it's own border. This will give the appearance of the triple border you're looking for.
Of course, you can only use this solution if you aren't already using :before and :after for something else.
Hope that gives you some ideas.
I think the only way to do this is by using a wrapper unfortunately. I'm not sure if it is possible to get the transparency through the button background.
Although, if you know the background color, you can use that in the border obviously, but of course this won't work for background gradients.
Here is a proposed jsFiddle showing knowing the color, and another using a wrapper:
http://jsfiddle.net/eD6xy/
HTML:
<div class="box one-div">(1 div, know color)</div>
<div class="two-div">
<div class="box">(2 divs, pure transparent)</div>
</div>
CSS:
/*
With one div, works fine with a constant color (#abc)
But with gradient, probably won't match up correctly
*/
.one-div {
margin: 15px 10px;
border: 5px solid blue;
box-shadow: 0 0 0 5px #abc,
0 0 0 10px red;
}
.two-div {
margin-top: 30px;
padding: 5px;
border: 5px solid red;
}
.two-div > .box {
border: 5px solid blue;
}
In the site I am currently building I am having trouble getting my border colors right for <input> and <button> elements. I would like to have the top, left, and right borders to be the same color and then have the bottom border a different color. I can get the styling to work for any other element to work except for those two, and this issue only exist in IE9. Any help or explanation would be greatly appreciated.
Example of my problem: http://jsfiddle.net/NyG3x/24/
Try setting to borders separately.
border: 1px solid #000;
border-bottom: 5px solid #CE181E
This appears a bug in IE9. If you set the bottom border to 1px, the red border appears to show correctly. However, if you set the value to anything more than 1px, it seems to revert the border-color to the value of the other border-color.
UPDATE
A simple solution would be to remove the styling from the button, wrap the inner text of the button inside a div and style the div. This works in IE9 as shown here.
I know this is more markup, but it will surely solve the issue.
Apply the 1px border as usual to the three sides, but wrap your form elements in a tag, say a div tag and apply a 5px bottom border on the div tag.
HTML would look something like this:
<form id="button-set-two">
<div class="btn-wrapper">
<input class="btn-style" type="submit" value="Btn1" />
</div>
</form>
And CSS would look like this:
#button-set-two .btn-style{
border: 1px solid #000;
border-bottom:none;
color: #000;
float: left;
font-size: 1.6em;
margin-right: 5px;
padding: 2px 10px;
background: none;
}
#button-set-two .btn-wrapper{
border-bottom:5px solid #CE181E;
}
I find that I have to use the following style to specify a style for my right border:
border-right: 1px solid black;
When I tried to incorporate this information into my border element like this, it didn't work:
border: 0 1px solid black 0 0;
Assuming my syntax is wrong, is there a way to specify the right border style using only the border element?
No, for different borders you have to use border-right and so on, but can specify all of them then override:
border: 0px;
border-right: ...
Nope. Border sets all of them.
http://www.w3schools.com/css/css_border.asp
You'll need to use one that's specific to your need.