Did you see my Navbar Guide? Try it and if you find errors then let me know here.
Thread Starter
David_G
(@questas_admin)
I think you misunderstood. I am working with buttons not the navbar.
Here is the snippet I am working with. This works great
.btn-dave {
background-color: rgba: (0, 0, 0, 0,);
background-image: linear-gradient(to bottom, #ff0000, #0000ff);
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color: #fff;
}
I tried to use my own colors for the hover but this is not working:
.btn-dave.active, .btn-dave.disabled, .btn-dave:active, .btn-dave:focus, .btn-dave:hover, .btn-dave[disabled] {
background-color: linear-gradient(to bottom, #0000ff, #ff0000);
color: #fff;
}
Thread Starter
David_G
(@questas_admin)
OK I found the culprit (below) in the “tc_common.min.css” file. I tried commenting the snippet and then the 2nd snippet in my previous post takes effect EXCEPT line 2 (above).
I am open to ideas please.
.tc-fade- hover-links a.btn:focus,.tc-fade-hover-links a.btn:hover{
text-decoration:none;
background-position:0 -15px;
-webkit-transition:background-position .1s linear;
-moz-transition:background-position .1s linear;
-o-transition:background-position .1s linear;transition:background-position .1s linear}
Thread Starter
David_G
(@questas_admin)
I almost have it using this, it doesn’t seem to work on ACTIVE though. It doesn’t affect the regular buttons either.
I don’t get the reverse colors, just blue but I like it.
.btn-dave .tc-fade- hover-links a.btn-dave:focus,.tc-fade-hover-links a.btn-dave:hover, .tc-fade-hover-links a.btn-dave:active{
text-decoration:none;
background-position:0 29px;
background-color: #0000ff;
color: #fff;
-webkit-transition:background-position .1s linear;
-moz-transition:background-position .1s linear;
-o-transition:background-position .1s linear;
transition:background-position .1s linear
}
Thread Starter
David_G
(@questas_admin)
It seems I was fighting the “tc_common.min.css” file, so I just modified that part in child.
I know what you mean.
When you hover slider button, the bottom half color slides up.
Happened with me too but I solved it.
Thread Starter
David_G
(@questas_admin)
#ibogo I got it to slide up solid blue. But the active still slides up half white. What was your solution?
Thread Starter
David_G
(@questas_admin)
#rdellconsulting, no that link doesn’t really help much in this case, I almost have it working except the ACTIVE button. Take a look at my latest snippet.
Would be easier if I could figure out how to make firebug freeze after I hover over the button, but the code on the right disappears when I move the cursor away from the button.
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
background-color: solid blue;
background-image: linear-gradient(to bottom, transparent, transparent);
width:250px;height:200px
color: white;
outline:1px transparent;
font-family:Arial;
}
🙂
