I have faced a wired issue in chrome browser with button css. When I hover this button in chrome(not in firefox) its give unexpected effect.
here is current css:
input[type="button"], .button, button {
font-size: 100%;
transition: none !important;
text-transform: uppercase;
padding: 5px 15px;
line-height: 17px;
border-radius: 0px;
border: 3px solid #DDD;
background: transparent none repeat scroll 0% 0%;
color: #666;
font-weight: bold;
display: inline-block;
vertical-align: middle;
position: relative;
}
input[type="button"]:hover, .button:hover, button:hover {
border-color: #8E7EBF;
color: #FFF;
background: #8E7EBF none repeat scroll 0% 0%;
}
a, span, i {
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
I think you must take a look on theses properties of CSS (line 1058 of theme.css) :
a:hover, span:hover, i:hover
You must used this synthax for better compatibility :
a:hover, button:hover span, button:hover i
You can see the similar problem here : Button:hover not working in Firefox
Hi Write this css in your css file it will fix the problem
a:hover, span:hover, i:hover {
-webkit-transition: initial;
transition: initial;
}
i had same issue on chrome on hover btn class i fixed that adding this class to button
.btn-reset-transform:hover {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
transform: none !important;
}
Related
I'm using Bootstrap and SCSS to customize my CSS file. I have a nav-link like this:
.sidebar .nav-pills .nav-link:hover,
.sidebar .nav-pills .show > .nav-link {
#extend %underline-link;
background: linear-gradient(120deg, $sidebar-navitem-background-color 65%, $sidebar-navitem-background-color 65%);
}
.sidebar .nav-pills .nav-link.active,
.sidebar .nav-pills .show > .nav-link {
#extend %underline-link;
background: linear-gradient(120deg, darken($sidebar-navitem-background-color, 2) 65%, darken($sidebar-navitem-background-color, 2) 65%);
}
%underline-link {
color: $underline-link-color;
position: relative;
text-decoration: none;
transition: all 0.4s ease;
&:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0px;
left: 0;
background: $underline-link-color;
visibility: hidden;
transform: scaleX(0);
transform-origin: center left;
transition: all 0.3s ease 0s;
}
&:hover {
transition: all 0.4s ease;
&:before {
visibility: visible;
transform: scaleX(1);
}
}
}
The line is animated as expected when hovering over the item. However, when the item is active, the line disappears.
How do I keep the line showing as long as the item is active?
As you want to make your active state the same as your hover state you need to add the :active pseudo class alongside your :hover pseudo class in your SCSS. That will ensure that when the user clicks the link (i.e. the link is active) the style remains the same. More information about active state on MDN.
I have created a codepen with different styles for hover and active to show the interaction happening. If :hover and :active have the same styles you would therefore see no difference between the two states.
&:hover,
&:active {
transition: all 0.4s ease;
&:before {
visibility: visible;
transform: scaleX(1);
}
}
I have this page with books and animated authors names. Theres around 35 books on the page.
http://kutsalkitap.org/kaynaklar/
When you get your mouse on a book, name of the author fades in and goes down slowly. It look perfect on chrome but, on mozilla, names goes way more down than it should be. Passes through the other books section.
I tried a few things but couldn't managed to fix it. Can someone help me?
Here is my css:
<style>
#nav li.parent {
margin-left: 1px;
width: 740px;
height: 130px;
text-align: center;
border: 1px solid #000;
margin: 10px;
list-style: none;
font-family: Montserrat, sans-serif;
font-size: 24px;
}
/* Effect 9: second text and borders */
#nav li.parent a {
margin: 0 20px;
padding: 18px 20px;
}
#nav li.parent a::before, #nav li.parent a::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: #fff;
content:'';
opacity: 0.2;
-webkit-transition: opacity 0.3s, height 0.3s;
-moz-transition: opacity 0.3s, height 0.3s;
transition: opacity 0.3s, height 0.3s;
}
#nav li.parent a::after {
top: 100%;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}
#nav li.parent a span:first-child {
z-index: 2;
display: block;
font-weight: 300;
}
#nav li.parent a span:last-child {
z-index: 1;
display: block;
padding: 8px 0 0 0;
color: rgba(0, 0, 0, 0.4);
text-shadow: none;
text-transform: none;
font-style: italic;
font-size: 0.75em;
font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
#nav li.parent a:hover::before, #nav li.parent a:focus::before {
height: 6px;
}
#nav li.parent a:hover::before, #nav li.parent a:hover::after, #nav li.parent a:focus::before, #nav li.parent a:focus::after {
opacity: 1;
-webkit-transform: translateY(0px);
}
#nav li.parent a:hover span:last-child, #nav li.parent a:focus span:last-child {
opacity: 1;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
transform: translateY(0%);
}
</style>
inline elements are not cross-browser. in your case consider <span> and <a>. use display: block for those elements or if you don't need those to be block, simply use display: inline-block; vertical-align: top;
that should work for you.
You just remove the <br> tag in between the class "text1" and "text2" in every <a> tag.
HTML:
<span class="text1" style="color:#000;font-size:24px;">Bir Satanistin Anıları</span>
<span class="text2" style="color:#000;font-size:18px;">Hershel Smith</span>
Page with buttons here: http://teamcherry.com.au/jam-games/
The effect I'm trying to achieve with the links on this page is that the button expands when hovered, with the text remaining the same size, and the text staying in the same position on the screen (so the button doesn't appear to 'move' when changing size).
After researching for a while, I've managed to achieve the desired effect using the below css, which changes the padding an margin on hover using css transition:
a.btn {
display: inline-block;
background-color: #d11b34;
color: #fff;
text-decoration: none;
font-size: 20px;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
transition: all 0.3s ease 0s;
}
a.btn:hover {
background-color: #a61529;
padding: 15px;
padding-right: 25px;
padding-left: 25px;
margin: -5px;
}
This achieves the effect, but the effect is super jittery when animating in Chrome (and possibly other browsers) and the button seems to quiver when hovering.
Is there another way to achieve this precise effect without animation jittering? Ideally in pure CSS but if JS or JQ is required then that's what I'll use.
Use hardware acceleration and add a bit more time to the animation (you can adjust if needed) and it looks nice. You can also use ease-in-out for a smoother effect. Tested in FF and Chrome
a.btn {
display: inline-block;
background-color: #d11b34;
color: #fff;
text-decoration: none;
font-size: 20px;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
transition: all 0.6s ease;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
I achieved this by box-shadow
a {
transition: .2s ease;
&:hover {
box-shadow: 0 0 0 .3rem $color;
}
}
use transition scale . That is smoother solution for you :)
a.btn {
display: inline-block;
background-color: #d11b34;
color: #fff;
text-decoration: none;
font-size: 20px;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transform: scale(1,1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1,1);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
}
a.btn:hover {
-webkit-transform: scale(1.05,1.07);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1.05,1.07);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
}
Tested in chrome console. Hope it helps :)
Good day to you:)
Firstly I added a css hover effect on jump-link function on blogger, but it hadn't work
Here is my css :
.jump-link a {
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.jump-link a::before {
position: absolute;
top: 100%;
left: 50%;
color: transparent;
content: '\2022';
text-shadow: 0 0 transparent;
font-size: 1.2em;
-webkit-transition: text-shadow 0.3s, color 0.3s;
-moz-transition: text-shadow 0.3s, color 0.3s;
transition: text-shadow 0.3s, color 0.3s;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
pointer-events: none;
}
.jump-link a:hover::before,
.jump-link a:focus::before {
color: #fff;
text-shadow: 10px 0 #fff, -10px 0 #fff;
}
.jump-link a:hover,
.jump-link a:focus {
color: #ba7700;
}
I will be thankful for any help . :)
.jump-link a:hover{color:red;text-decoration:underline;}
Also don't use two :: in .jump-link a:hover::before
For example code below will add a "+" when user hovers any link.
a:hover:before {
content: "+";
}
Okay, so I can't figure out why this isn't working.
The hover effect with the fade in doesn't seem to be applying to this.
css
.panel_button {
}
.panel_button a {
webkit-transition: all 10.0s ease;
-moz-transition: all 10.0s ease;
transition: all 10.0s ease;
background-color: #000;
display: block;
width: 50%;
height: 160px;
color: #000099;
font-family: Arial, Helvetica, sans-serif;
}
.panel_button a:hover {
background: #808080;
color: #FFFFFF;
}
Header page
<div class="panel_button" style="display: visible;"> BLOG </div>
The website where this code is implemented is at niu-niu.org
Thank you!
Your webkit-transition: all 10.0s ease; is missing the dash at the beginning. Change it to this:
-webkit-transition: all 10.0s ease;