I need to create this kind of button in Bootstrap 3:
The problem is that line between text and icon: I have tried a lot but still didn't get the same look :(
Here is what I have for now
CSS
.btn-default, .btn-default:active, .btn-default:focus{
background-color:#fff;
background-color: rgba(255,255,255, 1.0);
-webkit-box-shadow: 0px 4px 0px 0px rgba(48, 174, 227, 1.0);
-moz-box-shadow: 0px 4px 0px 0px rgba(48, 174, 227, 1.0);
box-shadow: 0px 4px 0px 0px rgba(48, 174, 227, 1.0);
border-top:1px solid rgba(48, 174, 227, 1.0);
border-left:1px solid rgba(48, 174, 227, 1.0);
border-right:1px solid rgba(48, 174, 227, 1.0);
}
HTML
<i class="fa fa-lg fa-file-excel-o"></i>Export to excel
Maybe the answer is in btn group, but that icon is clickable also :(
demo - http://www.bootply.com/vVPtGC3QEs
a.btn{
padding:4px 15px;
}
.fa-lg{
border-right: 2px solid rgba(48, 174, 227, 1.0);
padding-right: 7px;
margin-right: 8px;
vertical-align: initial;
line-height:28px;
}
Related
I have different <div>s with box-shadow. In Chrome desktop, the shadows look fine. However, in mobile, things get strange. I've read different posts with this issue and it was recommended I added a -webkit-appearance: none; but it doesn't do anything. Here's my codepen.
This is what I get in desktop (correct)
And this is what it looks like in mobile Chrome in an iPhone:
Here's my code (I'm using Bootstrap 4):
.white-card-bg {
background-color: #fff;
-webkit-box-shadow: 0px 0px 2px rgba(12, 26, 75, 0.24), 0px 3px 8px -1px rgba(50, 50, 71, 0.05);
-moz-box-shadow: 0px 0px 2px rgba(12, 26, 75, 0.24), 0px 3px 8px -1px rgba(50, 50, 71, 0.05);
-ms-box-shadow: 0px 0px 2px rgba(12, 26, 75, 0.24), 0px 3px 8px -1px rgba(50, 50, 71, 0.05);
-o-box-shadow: 0px 0px 2px rgba(12, 26, 75, 0.24), 0px 3px 8px -1px rgba(50, 50, 71, 0.05);
border-radius: 24px;
box-sizing: border-box;
border: 2px solid transparent;
box-shadow: 0px 0px 2px rgba(12, 26, 75, 0.24), 0px 3px 8px -1px rgba(50, 50, 71, 0.05);
}
<div class="col-3 nl-servicio-destacado-card btn" type="button" role="button">
<div class="card-body white-card-bg text-center"> Content here </div>
</div>
I figured out what was wrong. Turns out it had nothing to do with the box-shadowit was the type="button" in my html that was causing the iPhone to add that strange shadow to the div. By removing that I solved this issue.
I need to disable :active pseudo selector for some (but not all) buttons. So button stays with exact same styles as it was as user fires onmousedown event.
I've tried to duplicate css styles from default btn to btn:active and it partially works, but some styles got overwritten.
Maybe there is some other options. I'm fine with using some quick and dirty solution for now.
In case someone need the code - posting it below:
.btn-system {
outline: none;
box-sizing: border-box;
height: 21px;
padding: 0px 16px;
font-size: 13px;
border: 1px solid #d5d5d5;
font-weight: 400;
background-color: #fff;
letter-spacing: 0.4px;
border-radius: 4.5px;
border-top-color: rgb(198, 198, 198);
border-bottom-color: rgb(170, 170, 170);
border-left-color: rgb(192, 192, 192);
border-right-color: rgb(192, 192, 192);
}
.btn-system.btn-active:not([disabled]), .btn-system:active {
/*color: #fff;
font-weight: 300;
letter-spacing: 0.8px;
padding: 0px 16px;
border-top-color: rgb(64, 150, 248);
border-bottom-color: rgb(9, 85, 255);
border-left-color: rgb(39, 122, 252);
border-right-color: rgb(39, 122, 252);
background-image: linear-gradient(rgb(94, 168, 249), rgb(14, 117, 255));*/
letter-spacing: 0.8px;
color: #fff;
font-weight: 300;
padding: 0px 17px 1px 16px;
border-top-color: rgb(64, 150, 248);
border-bottom-color: rgb(9, 85, 255);
border-left-color: rgb(39, 122, 252);
border-right-color: rgb(39, 122, 252);
background-image: linear-gradient(rgb(94, 168, 249), rgb(14, 117, 255));
}
.btn-system:active {
border-top-color: rgb(30, 114, 254);
border-bottom-color: rgb(3, 56, 216);
border-left-color: rgb(16, 82, 233);
border-right-color: rgb(17, 82, 227);
background-image: linear-gradient(rgb(64, 140, 253), rgb(11, 93, 224));
}
Give id's to those buttons with which you want to use pseudo selector
Hope this helps
I am wanting to know how I can horizontally and vertically center a div inside a parent div.
At the moment my div is horizontally vertical but not vertically horizontal.
Please can someone show me where i am going wrong? thanks
Desired Result:
|- - - - - - - - -
| |
| [ ] |
| |
| |
- - - - - - - - -
HTML:
<div class="primary_container">
<div class="home_column" id="login_box"></div>
</div>
CSS:
.primary_container{
width:900px;
height:100%;
position:relative;
margin:auto;
background: rgba(230, 155, 0, 0.7);
text-align:center;
z-index:2;
}
.home_column{
width: 30%;
margin: 0 auto;
min-height:240px;
text-align:center;
position:relative;
background: rgb(0, 0, 0); /* The Fallback */
background: rgba(138, 138, 138, 0.2);
border: 1px solid #666666;
-webkit-box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
-moz-box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
cursor:pointer;
cursor:hand;
text-shadow: 0px 2px 3px #999;
color:#000;
padding-top:20px;
padding-bottom:20px;
z-index:2;
}
.home_column{
width: 30%;
margin: auto;
max-height:240px;
text-align:center;
background: rgb(0, 0, 0); /* The Fallback */
background: rgba(138, 138, 138, 0.2);
border: 1px solid #666666;
-webkit-box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
-moz-box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
cursor:pointer;
cursor:hand;
text-shadow: 0px 2px 3px #999;
color:#000;
padding-top:20px;
padding-bottom:20px;
z-index:2;
position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;
}
use position absolute, and give the child div a max height.
I will also suggest look into the link below, this give complete detail on how to center a div at any given situatiton
https://css-tricks.com/centering-css-complete-guide/
https://css-tricks.com/centering-in-the-unknown/
I hope it was helpful.
My favorite way to center elements is by using display: flex. All you have to do is apply three attributes to your parent / containing class.
Here is a basic working jsFiddle example.
css:
.parent{
display:flex;
display:-webkit-flex;
justify-content:center;
align-items:center;
//...more styles
}
Here's your code updated with flexbox:
.primary_container{
display: -webkit-flex;
display: -moz-flex;
display: flex;
align-content:center;
justify-content:center;
width:900px;
height:100%;
background: rgba(230, 155, 0, 0.7);
text-align:center;
z-index:2;
}
.home_column{
display:-webkit-flex;
display:flex;
align-content:center;
justify-content:center;
width: 30%;
min-height:240px;
background: rgb(0, 0, 0); /* The Fallback */
background: rgba(138, 138, 138, 0.2);
border: 1px solid #666666;
-webkit-box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
-moz-box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
cursor:pointer;
cursor:hand;
text-shadow: 0px 2px 3px #999;
color:#000;
z-index:2;
}
Here's a working fiddle with your modified code:
jsFiddle
Learn more about flexbox on css-tricks
note: browser support
How do you surround a div with a border?
this is what I am trying to accomplish
and was done with images.
I have the sides (or top and bottom) , I can not surround the div with the gray- silver border.
[JsFiddle code:
<div class="panel-body">
<ul>
<li>Locomotives</li>
<li>Radios</li>
<li>Televisions</li>
<li>Computers</li>
<li>Monitors</li>
<li>Satellites</li>
<li>Spaceships</li>
<li>Submarines</li>
<li>Scuba Divers</li>
</ul>
</div>
]Jsfiddle2
Use box-shadow instead:
http://jsfiddle.net/3knyndxz/1/
.panel-body {
float: left;
padding: 30px;
background: #fff;
border-radius: 10px;
box-shadow: inset 0 0 20px #ccc;
}
This can be done with multiple layers of box-shadows, its tricky if you need to build some kind metal texture.
.container {
border: 1px solid #999;
height: 200px;
width: 90%;
display: flex;
justify-content: center;
padding: 20px;
}
.children {
width: 30%;
border: 1px solid #555;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
}
.metalone {
box-shadow: inset 0px -2px 0px 0px rgba(255, 255, 255, 0.62), inset 0px 2px 0px 0px rgba(255, 255, 255, 0.62), inset 0px 0px 1px 1px rgba(56, 8, 8, 0.91), inset 0px 0px 0px 2px rgba(192, 121, 121, 0.8), inset 0px 0px 0px 3px rgba(152, 47, 47, 0.85), inset 0px 0px 0px 4px rgba(152, 47, 47, 0.85), inset 0px 0px 1px 5px rgba(56, 8, 8, 0.945);
}
.metaltwo {
box-shadow: inset 0px 3px 0px 0px rgba(29, 29, 29, 0.62), inset 0px 0px 1px 2px rgba(46, 46, 46, 0.91), inset 0px 0px 0px 3px rgba(255, 255, 255, 0.8), inset 0px 0px 0px 4px rgba(112, 112, 112, 0.85), inset 0px 0px 0px 5px rgba(219, 219, 219, 0.85), inset 0px 0px 1px 6px rgb(250, 250, 250);
background: black;
color: white;
}
<div class="container">
<div class="metalone children">Metal Texture one</div>
<div class="metaltwo children">Metal Texture two</div>
</div>
box-shadow.
I've got a weird situation. I'm using AngularJS to dynamically set the position of a range slider based on the current position in the video. If I style just the thumb (by enabling the bottom two calls below) the thumb moves along the slider in real time as expected. If I style the input[type="range"] as in the first section below, the thumb doesn't move dynamically unless you mouse over it.
I have tried other CSS styles of range inputs that I pulled from various websites, and I experience the same outcome each time. This seems to affect only Chrome. The weirdest thing is that IE works just fine (who would have thought?!) with the styled slider and the thumb moves along nicely.
input[type="range"] //::-moz-range-track //::-ms-track
{
outline:none;
background: rgb(127, 183, 219);
width: 130px;
height: 6px;
-webkit-appearance: none;
border-radius: 8px;
-moz-border-radius: 8px;
-wekkit-border-radius: 8px;
}
input[type="range"]::-webkit-slider-thumb// ::-moz-range-thumb ::-ms-thumb
{
outline:none;
-webkit-appearance:none !important;
width:20px;
height:20px;
-webkit-appearance: none;
border-radius: 10px;
-moz-border-radius: 10px;
-wekkit-border-radius: 10px;
border:1px solid rgba(127, 183, 219, 1.0);
background: #FFF;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
-moz-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
}
input[type="range"] ::-webkit-slider-thumb:hover// ::-moz-range-thumb:hover ::-ms-thumb:hover
{
outline:none;
-webkit-appearance:none !important;
width:22px;
height:22px;
-webkit-appearance: none;
border-radius: 10px;
-moz-border-radius: 10px;
-wekkit-border-radius: 10px;
border: 1px solid rgba(127, 183, 219, 1.0);
background: #FFF;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
-moz-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
}