I have created a button with border-bottom of 4px. While hovering the button , I'm reducing the border-bottom-width as 0px and adding top of 4px to avoid affecting other elements below the button.
But the items below the button are moving while i'm hovering the button. Because, the blocks after the button are not considering the 4px top. So, It not looks good. How to overcome this problem..
.btn{
padding: 30px;
background-color: #30d589;
cursor: pointer;
border-bottom: 4px solid #1b8454;
}
.btn:hover{
border-bottom-width: 0px;
top: 4px;
}
I have updated my code in jsFiddle
Thanks in advance..
Use this css:
.btn{
padding: 30px;
background-color: #30d589;
cursor: pointer;
border-bottom: 4px solid #1b8454;
display: block;
float: left;
box-sizing: border-box;
transition: all 0.2s linear;
margin-right: 100%;
}
.btn:hover{
margin-top: 4px;
border-bottom-width: 0px;
}
Here is a working fiddle:
http://jsfiddle.net/Hive7/5mhGt/2/
If you want to keep the border color and keep the text from jittering while animating the :hover state, try wrapping your button(s) in a relatively positioned container.
Then, update your css:
.btn-wrapper {
position: relative;
height: 100px;
}
.btn{
position: absolute;
top: 8px;
padding: 30px;
background-color: #30d589;
cursor: pointer;
border-bottom: 4px solid #1b8454;
display: inline-block;
transition: 0.2s;
}
.btn:hover{
top: 12px;
border: 0px;
}
jsfiddle: http://jsfiddle.net/BpL2A/
Updated fiddle: http://jsfiddle.net/5mhGt/5/.
The easiest way to resolve your problem is to make the border transparent:
.btn:hover {
border-bottom-color: transparent;
}
You don't have to mess with another properties like margin-bottom or so. If you decide to change the border width in the future you won't have to have this margin always in mind.
Related
I have seen some solutions but they actually affect the design intended.
Is there any way to stop this flicker without altering the design?
I understand that the problem is that While hovering over a moving (or animated) element, it may just un-hover from the element because it moves beneath my cursor.
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: #FFEE32;
}
.button {
box-shadow: -10px 10px;
background-color: #FFEE32;
border: 3px solid;
display: inline-block;
cursor: pointer;
color: #202020;
font-size: 30px;
font-weight: bold;
padding: 20px 30px;
transition: all 0.15s linear 0s;
text-decoration: none;
position: relative;
box-sizing: border-box;
}
.button:hover {
top: 3px;
transition: all 0.15s linear 0s;
left: -3px;
color: #FFEE32;
background-color: #202020;
border: #FFEE32;
box-shadow: 0px 0px 0 #ffe800 !important;
position: relative;
}
</style>
</head>
<body>
<h2>Animated Button - "Pressed Effect"</h2>
<div class="see">
<button class="button">Click Me</button>
</div>
</body>
</html>
check it out here, try to hover on edges from right and bottom
I would add an ::after pseudo element on your .button:hover, that will be slightly bigger than your actual button's area. As a result while you're hovering, the pseudo element will 'jump' under the cursor, that will prevent flickering - .button will not escape from your mouse :)
The below addition is not the perfect solution, but can be a working solution for your problem
.button:hover:after {
content: '';
position: absolute;
left: 0;
top: 0;
margin-left:10px;
margin-top:-10px;
height: 130%;
width: 110%;
/*border: 3px solid blue;*/
box-sizing: border-box;
padding:10px;
}
Please note, by uncommenting the border: 3px solid blue rule you'll see the actual position and size of the pseudo element on hover.
because of border size & top,left position button is "flickering" when hover on corner side.
Add "3px" in border & remove "top & left" position.
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: #FFEE32;
}
.button {
box-shadow: -10px 10px;
background-color: #FFEE32;
border: 3px solid;
display: inline-block;
cursor: pointer;
color: #202020;
font-size: 30px;
font-weight: bold;
padding: 20px 30px;
transition: all 0.15s linear 0s;
text-decoration: none;
position: relative;
box-sizing: border-box;
}
.button:hover {
top: 0px;
transition: all 0.15s linear 0s;
left: 0px;
color: #FFEE32;
background-color: #202020;
border:3px solid #FFEE32;
box-shadow: 0px 0px 0 #ffe800 !important;
position: relative;
}
</style>
</head>
<body>
<h2>Animated Button - "Pressed Effect"</h2>
<div class="see">
<button class="button">Click Me</button>
</div>
</body>
</html>
I just want to add a border for the image with padding also I need transition effect. It's working fine but has a few problems :
it shows little movements in the image on hover(not fixed)
Transitions not smooth.
I tried everything.
I applied box-sizing:border-box; and gave the image a margin of 2px and removed it on hover but still no luck.
See this example. It's perfectly fine and the image is not moving on hover.
Here is my code :
.home-item1 {
height: 107px;
width: 108px;
cursor: pointer;
box-sizing: border-box;
}
.home-item1 img {
border-radius: 50%;
margin: 2px;
transition: 0.2s ease-in-out;
}
.home-item1 img:hover {
border: 2px solid red;
margin: 0px;
padding: 2px;
}
<div class="home-item1">
<img src="http://i64.tinypic.com/2s0ftrc.png" alt="">
</div>
What am I missing? Please check the fiddle and let me know.
jsfiddle
This will work for you:
I have just added border: 4px solid transparent; and removed the margin and compensated it with the border and on hover reset it.
Fiddle
.home-item1 {
height: 107px;
width: 108px;
cursor: pointer;
box-sizing: border-box;
}
.home-item1 img{
border: 4px solid transparent;
border-radius: 50%;
padding: 0px;
transition:all 0.2s ease-in-out;
}
.home-item1 img:hover{
border: 2px solid red;
margin: 0px;
padding: 2px;
}
<div class="home-item1">
<img src="http://lorempixel.com/110/110/" alt="">
</div>
Hope this was helpfull.
First, You need to add transparent border to image so that it
will not move when hovered.
Second, Increase the duration of transition to get smooth effect
.home-item1 {
height: 107px;
width: 108px;
cursor: pointer;
box-sizing: border-box;
}
.home-item1 img{
border-radius: 50%;
margin: 2px;
transition: border 0.5s ease-in-out;
border: 2px solid transparent; /* Added */
}
.home-item1 img:hover{
border: 2px solid red;
margin: 0px; padding: 2px;
}
<div class="home-item1">
<img src="http://via.placeholder.com/350x150" alt="">
</div>
adding a border will add to the dimensions of the div which causes the movement.. adding color to a transparent border will not, it achieves the same effect.
I think all you need to do is to boost the transition period and just add border to the image so that the border could be seen for a good time on hover, thus showing a watery like, a bit moving effect to the image. Here it goes :
.home-item1 {
height: 105px;
width: 105px;
cursor: pointer;
box-sizing: border-box;
}
.home-item1 img{
border-radius: 60%;
margin: 2px;
transition: border 0.6s ease-in-out;
border: 3px solid transparent;
}
.home-item1 img:hover{
border: 2px solid red;
margin: 0px;
padding: 2px;
}
<div class="home-item1">
<img src="http://lorempixel.com/150/150/" alt="">
</div>
I want to create an html link that has this form:
when that link is hovered or focused that form should change its color.
The text in the link should be in the center of the link, normally that would mean display: block.
this mustn't have problems with using the same way to create a link the other direction in the same row. (I had problems with this when I used a technique with position: relative)
What I have already tried:
making a normal row and then fixing divs with height:0; width: 0; position: relative; top: 1.4rem; left: 0; border: 0.7rem solid white; border-right: 0.7rem solid transparent;, for the other direction the opposite way, but the two divs above the row didn't appeared in the same height.
making the triangles in the left not changing color when hovered or focused, but I didn't like that.
instead of using the border-hack with position: relative I used floats to fix them. This didn't worked when I also wanted to have the linktext vertically centered.
You can achieve the shape using pseudo elements like :before and :after
.box {
display: block;
position: relative;
width: 100px;
height: 50px;
background: #000;
margin-left: 20px;
color: #fff;
text-align: center;
line-height: 50px;
transition: all 0.5s ease;
cursor: pointer;
}
.box:after {
content: '';
position: absolute;
height: 0;
width: 0;
border: 25px solid transparent;
border-right: 25px solid #000;
left: -50px;
transition: all 0.5s ease;
}
.box:hover {
background: #eee;
color: #000;
}
.box:hover::after {
border-right: 25px solid #eee;
}
<a class='box'>Demo Link</a>
I created a button:
http://jsfiddle.net/fy2zG/#&togetherjs=xaJ1VA8PBN
My css so far is:
.button {
padding: 5px 20px;
background: orange;
position: relative;
float:left;
text-align: center;
border-radius: 10px;
text-decoration: none;
color: white;
}
My goal is to have (only) the right side of the button turning to an arrow peak on hover. The result should be something similar like this:
When hovering out, the button shall transit to its original shape.
Is this something that can be achieved with CSS or is jQuery needed?
Working example
jsfiddle
EDIT, now with transition
jsfiddle
EDIT, now with transition on mouseout
jsfiddle
HTML
login
CSS
.button {
padding: 5px 20px;
background: orange;
position: relative;
float:left;
text-align: center;
border-radius: 10px;
text-decoration: none;
color: white;
position:relative;
}
.button:after {
content: " ";
border: solid transparent;
border-width: 0;
border-left-color: orange;
position: absolute;
-webkit-transition: all 1s ease;
left: 100%;
top: 50%;
}
.button:hover:after {
content: " ";
display:block;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-left-color: orange;
border-width: 25px;
margin-top: -25px;
margin-left: -10px;
}
Can't make that with css or jQuery (unless i don't know some plugin).
Basically you must have two images. One for normal button, one for arrow shaped button. And onNover just change background image using background transition. But i think it will look ugly.
Please check this Fiddle:
http://jsfiddle.net/5WGLs/
If you hover over basker-holder, you can see that it's child-> shopping-cart top border is not behind it's parent. It should be white. The effect I am looking for is this:
http://i.stack.imgur.com/XBV82.png
Simply add position: relative;, background-color: #fff; and z-index: 2000; to .cart-btn.This way, .cart-btn will be over .shopping-cart and the background-color will hide to border-top.
View exemple: http://jsfiddle.net/5WGLs/3/
Hope this help.
You could use z-index. Demo
But you should read What No One Told You About Z-Index, because using such large z-indices is useless.
jsfiddle DEMO
Playing with the z-index and background; we can acheive that
edited css
.cart-btn {
color: #333;
display: inline-block;
margin-top: 12px;
padding: 5px 22px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
line-height: 30px;
border: 1px solid #fff;
position: relative;
z-index:10;
background:#fff;
}
.shopping-cart {
position: absolute;
background: #FFF;
left: 0;
text-align: left;
width: 160px;
border: 1px solid #fe4365;
top: 52px;
opacity: 0;
transform: translateY(25px) rotateY(50deg);
z-index:-1;
}