I'm trying to create a fancy button hover state for the default button in Bootstrap 3. Basically, the button starts out with 4px of border-bottom and when hovered this reduces to 2px. Because of this, I compensate with top: 2px on the button.
This works fine, however it's affecting other elements which I don't want it to do. For example, it pulls the paragraph beneath it up. Here's a JSFiddle example:
http://jsfiddle.net/kD6dQ/
You can see when you hover over the button the paragraph below changes position. How do I stop that?
I've tested this in the latest versions of Chrome and Firefox.
You used top for your element. When changed to margin-top it works.
fiddle
css:
.btn-default:hover {
background: #eba22b;
color: white;
border-bottom: 2px solid #db9016;
margin-top: 2px;
}
Try this for the hover declaration:
.btn-default:hover {
background: #eba22b;
color: white;
border-bottom: 2px solid #db9016;
top: 2px;
margin-bottom: 2px;
}
Check this fiddle: http://jsfiddle.net/kD6dQ/1/
The best way to solve this is to simply add height to .btn-default
E.G: height: 35px;
DEMO HERE
Related
Alright, so when I use this code and hover over the object, the transition works. But if I take my mouse OFF of the object, the transition doesn't happen. I've seen other posts talk about this but the solutions don't work.
Here's my code in CSS:
.square{
margin-top: 20px;
height: 100px;
width: 400px;
border-radius: 20px;
background:#3d3434;
outline: none;
transition: 0.25s;
}
.square:hover{
outline: 3px solid #21ff46;
}
Also, I'm relatively new to coding and CSS.
You code works properly. The reason why you see no animation on mouseleave is that after hover pseudostate ends, there's no outline at all, and browser doesn't know to what position he has to shrink the outline. Also it doesn't understand what color it should preserve while shrinking, without hover state there's no color defined.
So, the solution is to add this line to your .square
outline: 0 solid #21ff46;
Leave the rest as it is, your problem is solved.
I was wondering if anyone can help me. I'm trying to change the colour of my square at the bottom of my homepage it keeps on disappearing when I attempt to change the colour. I'm trying to change it to the colour white from solid red. Why does this keep happening?
Here is my codepen
Below is my CSS coding.
.next {
position:absolute;
bottom: 40px;
left:50%;
cursor:pointer;
height: 50px;
width: 50px;
border: 4px solid red;
border-top: none;
border-left: none;
transform: translateX(-50%) rotate(45deg);
}
Kind Regards,
Liam
Based on your css the arrow shape and color is set with the border property. In this case it's the right and bottom borders of your div that are given a red border, then the div is rotated to look like an arrow pointing downwards.
Update the border color to white instead of red:
border: 4px solid white;
If you were already doing the above, check in the developer console. Sometimes codepen doesn't fully update with your changes -- reload the page to try it again.
Have you tried using specifying the color as a hex value?
border: 4px solid #ff0000; //red
I am using bootstrap 3. The input type=text elements are cool. Now I would like to create a similar rounded border around a div element. Anything I've tried seems ugly, Is it possible with bootstrap 3?
Thanks in advance
To quickly make a div look like a Bootstrap input, simply add a .form-control class to your div.
<div class="form-control">I am inside a div.</div>
Also check out Bootstrap Panels. Since divs are not form controls, panals have rounded corners and are more appropriate for divs.
<div class="panel panel-default">
<div class="panel-body">I am inside a panel.</div>
</div>
Here is a JSFiddle demo of both options.
Since you're trying to emulate a bootstrap input, #James Lawruk's suggestion of using .form-control is the quickest simplest way to do it.
But if you want to learn how to emulate styling you see elsewhere (which you should), you need to inspect the css used in .form-control (if on Chrome, right-click and "inspect element"), copy the relevant styling, and create your own class to apply.
In this case:
.form-control{
display: block;
width: 100%; /* THIS */
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555; /* THIS */
background-color: #fff;
background-image: none;
border: 1px solid #ccc; /* THIS */
border-radius: 4px; /* THIS */
}
becomes
.custom{
width: 100%;
color: #555;
border: 1px solid #ccc;
border-radius: 4px;
}
NOTE: I am ignoring a few pseudo-classes also attached to .form-control, like :focus, but pseudo-elements are a another reason you might not want to apply a class that was designed for another purpose.
I have a Cloud of items which have all a hover state.
:hover {
opacity: 1;
border: 1px solid #333333;
}
but upon hovering all the other items get a weird re-alignment which switches back if hover is not triggered.
I tried making he padding bigger but it's still the same.
What am i missing here.
-----> http://jsfiddle.net/mMGAU/
The problem is, that the new border makes the element 2px wider. You can solve it like this:
champs-tag-card {
padding: 1px;
}
.champs-tag-card:hover {
padding: 0;
}
Demo
Try before buy
As an alternative: You could also set the border-color to transparent in the "normal" state.
On hover you add a 1px border which is not there normally. This causes your element to grow by 2px in both width and height. This causes your other elements to re-align accordingly.
You could place an initial 1px transparent border on your elements so they do not resize when the border is set.
.champs-tag-card {
border: 1px solid transparent;
http://jsfiddle.net/mMGAU/11/
border is increasing the width so go with outline property.
.champs-tag-card:hover {
opacity: 1;
outline: 1px solid #333333;
}
JSFiddle
Try adding:
border:1px solid transparent;
to .champs-tag-card. The border takes up space, and this is causing the re-alignment.
The following code is setup in the template to show each time a new sidebar widget is inserted. (It shows around each new widget)
<div class="sidebox-top"></div>
<div class="sidebox">
<div class="widgets">
<div class="textwidget">
[WIDGET CONTENT]
</div>
</div>
</div>
The above displays the following CSS:
.sidebox-top {
background-image: url("/images/top-border-side.gif");
background-position: center top;
background-repeat: no-repeat;
height: 4px;
}
.sidebox {
border-bottom: 1px solid #D9D9D9;
border-left: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
margin-bottom: 14px;
padding: 10px 18px 5px;
}
The result is this:
This works great for most all widgets used. However, I want the above images to show in the sidebar without the sidebox-top blue line or border. I know there is a way to use certain CSS symbols to identify before or after by using the > symbol, I'm just not sure how to use that here or if it will even work.
Any help is always appreciated. Thank you!
Replicating the issue
Okay, I've attempted to replicate your image in this JSFiddle demo. In case JSFiddle is down, here is what this looks like:
For this instead of using a background-image and 4px height on .sidebox-top, I've simply used a 4px border-top. Whilst not an identical replication, this achieves the same basic effect.
Hiding the .sidebox-top element
Step 1
To begin with, we need to target the very first child contained within the .textwidget divider, only if it's an img. We do not want to apply this styling to any other img elements after that, nor do we want to apply the styling if the img isn't the first element within the container. To do this, we can use:
.textwidget img:first-child { ... }
Step 2
The next step is to give our image top padding and negative top margin equal to the sum of the top padding of .sidebox and the height of .sidebox-top. We then want to give our image a background which is the same colour as the background of your widget:*
.textwidget img:first-child {
background: #fff;
padding-top:14px;
margin-top: -14px;
}
* Note: This assumes that your widget's background is the same as your widget's container's background and that the background is a solid colour. If it isn't, you'll need to play around with background-position to align your patterned background with the widget's background.
From this, we end up with our image overlapping the top border whilst remaining in the same position that it started in:
Step 3
The third step is to cover the entire .sidebox-top. To do this we're going to need to give our selected img left and right padding and negative left and right margin equal to the sum of the left and right padding of the .sidebox and its border-width:
.textwidget img:first-child {
... /* Styling from Step 2 */
padding-left: 18px;
padding-right: 18px;
margin-left: -19px;
margin-right: -19px;
}
Step 4
Step 3 has certainly covered the entire .sidebox-top, but it's also covered the borders of .sidebox. For this we need to add identical borders to our selected img and reduce the left and right padding on our img to allow for this:
.textwidget img:first-child {
... /* Styling from Step 2 */
padding-left: 17px;
padding-right: 17px;
... /* Margins from Step 3 */
border-left: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
}
Final Step
The final step is to add a top border to our img to complete the border of the widget. As with Step 4, for this we'll need to reduce the size of the top padding to allow for this border:
.textwidget img:first-child {
... /* Styling from previous steps */
padding-top: 13px;
border-top: 1px solid #D9D9D9;
}
Final JSFiddle demo.