for some reason a border around this button isn't appearing, can anyone take a look at the code and find out why?
Here is my code for the 'CLEAR' button:
.reset {
background-color: #0B0B45;
color: #11FFEE;
margin: 30px;
width: 120px;
height: 35px;
box-shadow: 0px 3.7px 2px #278ea5;
border: 10px;
border-color: #11FFEE;
`enter code here` font-size: large;
font-weight: 800;
The other buttons have this CSS:
.button {
justify-content: center;
margin: 30px;
width: 120px;
height: 35px;
font-size: large;
background-color: #11FFEE;
border: none;
font-weight: 800;
color: #0B0B45;
box-shadow: 0px 3.7px 2px #278ea5;
border-radius: 2px;
border is a shorthand property for border-width, border-style, and border-color. In order to make it work correctly you may change the border to border-width or set all properties of border using a shorthand.
More information about borders: https://developer.mozilla.org/en-US/docs/Web/CSS/border
Example solution:
.reset {
background-color: #0B0B45;
color: #11FFEE;
margin: 30px;
width: 120px;
height: 35px;
box-shadow: 0px 3.7px 2px #278ea5;
border-width: 10px;
border-color: #11FFEE;
font-size: large;
font-weight: 800;
}
You're not seeing your border because you did not specify a border-style property. It is important to always specify border-style otherwise nothing will be displayed. Try "border-style: solid;" for example.
Related
I've got an input box when I apply border-radius to it there is a white space between the input-box and border.
Not sure why it is appearing. Please help
Note: i'm using bootstrap 3
.form-control {
padding: 0 8px;
line-height: 24px;
font-size: 12px;
font-weight: bold;
border: 2px solid #1d79d1;
color: #1d79d1;
min-width: 96px;
height: 32px;
border-radius: 32px;
background-color: #1d79d1;
}
<input class="form-control filter-button selectedBorder">
remove Borders as you're giving same colors to both border and
As your border color and background color are the same: Remove border and increase height or padding to compensate for height of border.
.form-control {
padding: 0 8px;
line-height: 24px;
font-size: 12px;
font-weight: bold;
color: #1d79d1;
min-width: 96px;
height: 34px;
border-radius: 32px;
background-color: #1d79d1;
}
I had similar issues. The input field and submit type can have rendering issues with border and border-radius feathering the border and background color.
You can us a box shadow to achieve the same effect.
.form-control {
padding: 0 8px;
line-height: 24px;
font-size: 12px;
font-weight: bold;
/* Change This */
/* border: 2px solid #1d79d1; */
border: none;
/* Add This */
box-shadow: 0 0 0 2px #1d79d1;
color: #1d79d1;
min-width: 96px;
height: 32px;
border-radius: 32px;
background-color: #1d79d1;
}
<input class="form-control filter-button selectedBorder">
#learn-more-button {
position: relative;
top: 69%;
margin: 0 auto;
padding-top: 18px;
width: 185px;
height: 38px;
background-color: #009ee3;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
color: #fff;
font-weight: 400;
text-align: center;
letter-spacing: 2px;
transition: 0.85s;
}
#learn-more-button:hover {
/*box-sizing: border-box;
border-bottom: 5px solid #c42c50;*/
-webkit-transform: rotateX(25deg);
transform: rotateX(25deg);
cursor: pointer;
border-bottom: 5px solid #0091c8;
}
<div id="learn-more-button">Button</div>
I have created a button that is just a blue, flat rectangle with "learn more" text. When hovered, I want it to slightly rotate on the X axis and have a slightly darker bottom border to create the illusion of a thin box style button rotating slightly. My method does work, however it seems quite "glitchy" (for lack of a better word). To try and explain, a tiny white line appears on the border for a split second and the rotation isn't smooth. The website isn't live yet so I'm not sure how I could show this if required.
Using a solid box-shadow will transition a bit more gracefully than border.
Either way, part of the glitchy feel was that you were transitioning from no border property to a 5px border (instead of a 0px border to 5px border), so the border popped away instead of animating on mouseout. In this case, I added a 0px box-shadow to the button before it animates, so the transition is smoother.
#learn-more-button {
position: relative;
top: 69%;
margin: 0 auto;
padding-top: 18px;
width: 185px;
height: 38px;
background-color: #009ee3;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
color: #fff;
font-weight: 400;
text-align: center;
letter-spacing: 2px;
transition: 0.85s;
box-shadow: #0091c8 0 0 0;
}
#learn-more-button:hover {
/*box-sizing: border-box;
border-bottom: 5px solid #c42c50;*/
-webkit-transform: rotateX(25deg);
transform: rotateX(25deg);
cursor: pointer;
box-shadow: #0091c8 0 5px 0;
}
<div id="learn-more-button">Button</div>
I have a weird case where the caret for the twitter bootstrap select is not appearing after some customisation. I am therefore looking to restore the style for the select. These are the current styles:
#sidebar2 select {
max-width: 100%;
margin: 0px;
border: 1px solid #ccc !important;
outline: 0;
display:block;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075) !important;
border-radius: 2px !important;
width: 100% !important;
height: 32px !important;
font-weight: 500;
-webkit-appearance: none !important;
-webkit-transition: none !important;
text-transform: none;
font: inherit;
vertical-align: top;
}
Because you use -webkit-appearance: none !important, it will make the caret disappear, you can try on mozzila and see the caret still there
This question already has answers here:
Circle with two borders
(4 answers)
Closed 7 years ago.
I have a circle with one border, but I would like to know if there is anyway to achieve a circle with two borders of different colors. I have following CSS producing circle as follows:
.circle {
width: 20px;
height: 20px;
border-radius: 12px;
border: 1.5px solid #fff;
font-family: Cambria;
font-size: 11px;
color: white;
line-height: 20px;
text-align: center;
background: #3E78B2;
}
.circle:hover {
width: 27px;
height: 27px;
border-radius: 18px;
font-size: 12px;
color: white;
line-height: 27px;
text-align: center;
background: #3E78B2;
}
Here is link to jsFiddle
You could see currently it has some white border. I would like to add another border on top of white border.
Please let me know if you have any ideas/suggestions.
Hi u can make this also :
.container {
background-color: grey;
height: 200px;
padding:10px; // ADD THIS ALSO
}
.circle {
width: 20px;
height: 20px;
border-radius: 12px;
border: 1.5px solid #fff;
font-family: Cambria;
font-size: 11px;
color: white;
line-height: 20px;
text-align: center;
background: #3E78B2;
box-shadow: 0 0 0 3px #002525; // JUST ADD THIS LINE AND MODIFY YOUR COLOR
}
the advantage is that you can also put a blur effect, changing like this:
box-shadow: 0 0 3px 3px #002525;
If I understand you correctly, I think you're looking to do something along these lines: http://jsfiddle.net/QCVjr/1/
.circle {
width: 20px;
height: 20px;
border-radius: 12px;
border: 1.5px solid #000;
font-family: Cambria;
font-size: 11px;
color: white;
line-height: 20px;
text-align: center;
background: #fff;
position: relative;
z-index: 1;
}
.circle:before {
position: absolute;
right: 2px;
top: 2px;
left: 2px;
bottom: 2px;
content: '';
background: #3E78B2;
border-radius: 25px;
z-index: -1;
}
.circle:hover {
width: 27px;
height: 27px;
border-radius: 18px;
font-size: 12px;
color: white;
line-height: 27px;
text-align: center;
background: #fff;
}
You'll notice that I took your original background color and added it to the :before pseudo-element, moved the #fff to the background, and made your other border color (in this example, #000) the border color of the original element. Both z-indexes are required to get the right layering.
Can't figure out how I"m getting this extra white space around my image:
The markup:
<div id="member-name" hidden="true">
<button type="submit" id="btnExpandSection"><img src="~/Content/Images/plus.jpg" /></button><p id="member-fullName"></p>
</div>
the styles:
input, textarea
{
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: .9em;
margin: 5px 0 6px 0;
padding: 5px 2px 5px 5px;
width: 300px;
}
img
{
display: block; /* gets rid off any unexpected margins round the image */
border: 0px;
}
input[type="submit"], input[type="button"], button
{
background-color: #ffffff;
cursor: pointer;
font-size: 11px;
font-weight: 600;
width: auto;
vertical-align: middle;
border: 0px;
}
td input[type="submit"], td input[type="button"], td button { font-size: 1em; }
UPDATE:
There's also this style in there:
#member-name
{
margin: 30px 0px 0px 0px;
height: 30px;
font-weight: bold;
color: white;
padding: 1px 1px 0px 1px;
background-color: #d28105;
border: 1px solid darkgray;
}
#member-fullName { margin: 0px 0px 0px 20px;}
#member-fullName p{ display: inline;float: left;overflow: hidden;}
Can't you just provide the image as a background to the button element?
#btnExpandSection {
background: #ffffff url('/Content/Images/plus.jpg') no-repeat center center;
height: /* image height */;
width: /* image width */;
}
I would start with this, and build it back from here...
button,
#member-fullName,
#member-name,
#btnExpandSection,
#btnExpandSection img {
margin: 0;
padding: 0;
}
But the following would definitely be preferably to an image nested between <button></button> tags. Replace 32px with actual width and height values of your image.
button {
background-image: url(~/Content/Images/plus.jpg);
width: 32px;
height: 32px;
}