I have a button with hover effect.
When I am applying the hover class then the image(down arrow) is missing. If I remove hover class then I can see the image.
Html code with hover class
<button type="submit" class="button uppercase btn-1b">home</button>
Html code without hover class
<button type="submit" class="button uppercase">home</button>
Demo - With Image but without hover effect
Demo -- With hover effect but missing the image.
Any help is highly appreciated. Thanks in advance.
You can define arrow image in .button::before pseudo-element and transitioning background in .btn-1b:after:
.button::before {
background-image: url("http://s12.postimg.org/63ise2fkp/button_arrow.png?noCache=1431762044");
background-repeat: no-repeat;
content: "";
height: 5px;
position: absolute;
right: 4.1rem;
top: 1.1rem;
width: 8px;
}
.uppercase {
text-transform: uppercase;
}
.button {
color: white;
position: relative;
z-index: 1;
background: #000;
border: 1px solid #9d9368;
font-size: 17px;
padding: 0.5rem 2rem;
width: 220px;
display: inline-block;
cursor:pointer;
}
.btn-1b:after {
content: '';
position: absolute;
transition: all 0.3s ease 0s;
width: 100%;
height: 0;
top: 0;
left: 0;
background: #ffffff;
z-index: -1;
}
.btn-1b:hover, .btn-1b:active {
color: #0e83cd;
}
.btn-1b:hover:after, .btn-1b:active:after {
height: 100%;
}
<button type="submit" class="button uppercase btn-1b">home</button>
Related
I have a button that on hover will go up by 10px. The problem is if the cursor is positioned at just barely under the button when the button is transitioned or transitioning by 10px, it twitches.
.talk-to-us {
padding: 10px;
height: 43px;
width: 148px;
background-color: #00cdac;
position: relative;
transition: top ease .40s;
top: 0;
}
.talk-to-us:hover {
top: -10px;
}
.link {
color: white;
font-size: 14px;
padding: 10px;
}
<button class="talk-to-us">
<a class="link" href="#">TALK TO US!</a>
</button>
How do I prevent this behavior solely by CSS?
One possibility would be to add a pseudo element that extends downward far enough to account for the upward shift, so the mouse remains within the target area. With a transparent background you won't see it but it still captures mouse events.
The only change here is the addition of the ::after selector/rules:
.talk-to-us {
padding: 10px;
height: 43px;
width: 148px;
background-color: #00cdac;
position: relative;
transition: top ease .40s;
top: 0;
}
.talk-to-us:hover {
top: -10px;
}
.talk-to-us:hover::after {
content: '';
position: absolute;
height: 20px;
background: transparent;
left: 0;
right: 0;
top: 100%;
}
.link {
color: white;
font-size: 14px;
padding: 10px;
}
<button class="talk-to-us">
<a class="link" href="#">TALK TO US!</a>
</button>
I have this button/speech bubble:
Code:
<div value="GO" id="go-div" class="bubble">
<input type="submit" value="GO" id="go-button" style=" position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;" data-target="#search-results-page">
</div>
I have this styling, to change the little arrow colour, when hovering on the button:
#go-div.bubble:hover:after {
border-color: transparent #ffffff;
}
Which gives this effect when hovering over the bubble:
However, when I hover over the little arrow it doesn't cause the whole button to change color:
What is the css that selects the little arrow (.bubble:after) hover and effects the whole button (.button) to turn it white?
Here is the jsfiddle
You can apply your :hover style to the parent element and since :after is a child when you hover on the arrow it will trigger hover on parent.
#go-div:hover #go-button{
background: white;
}
.bubble
{
position: relative;
width: 250px;
height: 65px;
padding: 0px;
background: #ff8282;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 0 15px 24px;
border-color: transparent #ff8282;
display: block;
width: 0;
z-index: 1;
margin-top: -15px;
right: -24px;
top: 50%;
}
#go-div.bubble:hover:after {
border-color: transparent #ffffff;
}
#go-button:hover {
text-decoration: none;
background-color:white;
color: brand-red
}
#go-button,
#go-div{
font: 200 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
border-radius: 6px;
height: 64px;
text-decoration: none;
width: 100%;
background-color: #ff8282;
padding: 12px;
border: 0px solid #fff;
color: #fff;
cursor: pointer;
}
#go-div:hover #go-button{
background: white;
}
<div value="GO" id="go-div" class="bubble">
<input type="submit" value="GO" id="go-button" style=" position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;" data-target="#search-results-page">
</div>
You can't use .bubble:hover:after to select the entire bubble as shown below:
.bubble:hover:after .bubble {
background-color: #ffffff;
}
So, your only choice is to put the :hover on the parent element. This way both elements will be affected and no further action will be needed:
.bubble:hover > #go-button {
background: #ffffff;
}
You can check out an updated, working version of your jsFiddle here.
I have a button with a background color, and text color set. What I like to do, is when the user hover the mouse on the button, the background to animate from bottom to top and change the color of the text to the color of the background.
For terms of simplicity of the code, I didn't put the transient I like to apply on the CSS properties. I know it's much easyer to change the button background code, but I plan to use transient for changing the :before height on hover.
So I have the following code, but when I hover the mouse on the button, the :before overlapping my button text.
I have also try to play with the z-index but no luck. Do you think is there any solution to this problem ?
body {
background: #111;
}
.btn {
color: #FFF;
background: #333;
border: none;
font-size: 18px;
font-weight: bold;
padding: 18px 60px;
position: relative;
}
.btn:before {
display: block;
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: #FFF;
}
.btn:hover {
color: #333;
}
.btn:hover:before {
height: 100%;
}
<br />
Do Stuff
You need to add additional <span> element which would stay above the ::before pseudoelement:
span {
position: relative;
z-index: 1;
}
fiddle
The effect you desire can also be achieved without adding the additional span. By utilising the before and after pseudo elements for background colours and positioning them correctly.
To position the pseudo elements behind the text, set a positive z-index on the element and a negative z-index on the pseudo-element.
.btn {z-index: 1}
.btn:before {z-index: -1;}
Reference this article by Nicolas Gallagher which explains in more detail, see section 'Pseudo background-position' http://nicolasgallagher.com/an-introduction-to-css-pseudo-element-hacks/.
Also see fiddle with it in action: https://jsfiddle.net/j9whmcmz/2/
This technique does not work if you apply a background color to the .btn itself.
Choose your poison I guess, both solutions do the trick.
Try this:
body {
background: #333;
}
.btn {
color: #FFF;
background: #333;
display: inline-block;
position: relative;
overflow: hidden;
-webkit-transition: color 0.3s ease-in-out;
transition: color 0.3s ease-in-out;
}
.btn span {
display: inline-block;
padding: 18px 60px;
border: none;
font-size: 18px;
font-weight: bold;
z-index: 10;
position: relative;
}
.btn:after {
display: block;
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-height: 0;
background: #FFF;
height: 100%;
z-index: 9;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.btn:hover {
color: #333;
}
.btn:hover:after {
max-height: 100%;
top: 0;
}
<span>Do Stuff</span>
Solution if pretty obvious - content of the button should be also absolute positioned. Then browser order them properly behind each other.
EDIT: Maybe my formatting and styling is not the best for the case, but it was quick update of your code to get the idea
body {
background: #111;
}
.btn {
color: #FFF;
background: #333;
border: none;
font-size: 18px;
font-weight: bold;
padding: 18px 60px;
position: relative;
}
.btn span {
display: block;
content: '';
position: absolute;
top: 18px;
left: 0px;
width: 100%;
text-align: center;
}
.btn:before {
display: block;
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: #FFF;
}
.btn:hover {
color: #333;
}
.btn:hover:before {
height: 100%;
}
<br />
<span>Do Stuff</span>
I am trying to style the up and down button of the input field number on FF. I have successfully achieved this on chrome with the below code but I can't find any CSS trick to do it on FF.
I can't use JS to do this.
Is it possible to style the up and down using CSS in FF? if so how? - I only need to achieve this on the latest version
DOM
<div class="productQty">
<span></span>
<input type="number" max="10" min="1" class="mod"/>
</div>
CSS
input[type="number"] {
height: 30px;
width: 60px;
font-size: 18px;
position: relative;
background-color: transparent;
border: none;
-moz-appearance: textfield;
}
.productQty span {
display: block;
width: 41px;
height: 30px;
background: white;
z-index: -1;
position: absolute;
top: 0;
left: 0;
bottom: 0;
border: solid 1px #999999;
}
/* Spin Buttons modified */
input[type="number"].mod::-webkit-outer-spin-button,
input[type="number"].mod::-webkit-inner-spin-button {
-webkit-appearance: none;
background: transparent url("../img/updown.png") no-repeat center center;
width: 16px;
height: 100%;
opacity: 1; /* shows Spin Buttons per default (Chrome >= 39) */
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
input[type="number"].mod::-moz-inner-spin-button:hover,
input[type="number"].mod::-moz-inner-spin-button:active{
border: none;
}
/* Override browser form filling */
input:-webkit-autofill {
background: black;
color: red;
}
How does it look on chrome and how it should look
How does it looks in FF 38
You can't directly apply css to the buttons on FF, there is a bugreport about it:
https://bugzilla.mozilla.org/show_bug.cgi?id=1108469
If you don't mind to apply some css to the containing element, you could use the :before and :after to overlay custom buttons.
div:before, div:after {
display: block;
position: absolute;
width: 14px;
height: 8px;
line-height: 8px;
background-color: #ccc;
left: 136px;
z-index: 1;
font-size: 9px;
text-align: center;
pointer-events: none;
}
div:before {
content: "+";
top: 11px;
}
div:after {
content: "-";
top: 20px;
}
<div><input type="number" /></div>
I have a button which has a static and hover state.
Now there is a small down arrow image which sits after text using :before class. I had to use :before instead :after as there is a hover effect. Due to hover effect the :after class was not displaying the small arrow image so I had to use :before and absolute positioning to position that image after text.
The problem is that the text length can vary and as it is absolute position so sometimes the image sits inside the text not after the text.
Here is the code
<button type="submit" class="button uppercase btn-1b">home</button>
<br>
<br>
<button type="submit" class="button uppercase btn-1b">development</button>
Demo: Example of short and long text with image(small down arrow)
Any help is highly appreciated. Thanks in advance.
interchanged with :before :after
remove position: absolute; for arrow
.uppercase {
text-transform: uppercase;
}
.button {
color: white;
position: relative;
z-index: 1;
background: #000;
border: 1px solid #9d9368;
font-size: 17px;
padding: 0.5rem 2rem;
width: 220px;
display: inline-block;
cursor:pointer;
}
.button:after {
background-image: url("http://s12.postimg.org/63ise2fkp/button_arrow.png?noCache=1431762044");
background-repeat: no-repeat;
content:"";
height: 5px;
width: 8px;
margin-left: 5px;
display: inline-block;
vertical-align: middle;
}
.button:before {
content:"";
position: absolute;
top: 1.1rem;
right: 4.1rem;
transition: all 0.3s ease 0s;
z-index: -1;
}
.btn-1b:before {
width: 100%;
height: 0;
top: 0;
left: 0;
background: #b0a479;
}
.btn-1b:hover, .btn-1b:active {
color: #000000;
}
.btn-1b:hover:before, .btn-1b:active:before {
height: 100%;
}
.button:hover:after {
background-image: url("http://s8.postimg.org/419zt4xk1/button_arrow_hover.png?noCache=1431844698");
}
<button type="submit" class="button uppercase btn-1b">home</button>
<br>
<br>
<button type="submit" class="button uppercase btn-1b">development</button>
I'd suggest taking advantage of the fact that the <button> element can contain child elements, and wrapping the text with a <span>, then using the - more appropriate ::after pseudo-element:
<button type="submit" class="button uppercase btn-1b"><span>home</span>
</button>
<br>
<br>
<button type="submit" class="button uppercase btn-1b"><span>development</span>
</button>
And using the following CSS for the un-hovered and hovered states:
.button span:after {
background-image: url("http://s12.postimg.org/63ise2fkp/button_arrow.png?noCache=1431762044");
background-repeat: no-repeat;
content:"";
display: inline-block;
height: 5px;
width: 8px;
margin-left: 0.5em;
}
.button:hover span:after {
background-image: url("http://s8.postimg.org/419zt4xk1/button_arrow_hover.png?noCache=1431844698");
}
.button span:after {
background-image: url("http://s12.postimg.org/63ise2fkp/button_arrow.png?noCache=1431762044");
background-repeat: no-repeat;
content: "";
display: inline-block;
height: 5px;
width: 8px;
margin-left: 0.5em;
}
.button:after {
content: "";
position: absolute;
top: 1.1rem;
right: 4.1rem;
transition: all 0.3s ease 0s;
z-index: -1;
}
.uppercase {
text-transform: uppercase;
}
.button {
color: white;
position: relative;
z-index: 1;
background: #000;
border: 1px solid #9d9368;
font-size: 17px;
padding: 0.5rem 2rem;
width: 220px;
display: inline-block;
cursor: pointer;
}
.btn-1b:after {
width: 100%;
height: 0;
top: 0;
left: 0;
background: #b0a479;
}
.btn-1b:hover,
.btn-1b:active {
color: #000000;
}
.btn-1b:hover:after,
.btn-1b:active:after {
height: 100%;
}
.button:hover span:after {
background-image: url("http://s8.postimg.org/419zt4xk1/button_arrow_hover.png?noCache=1431844698");
}
<button type="submit" class="button uppercase btn-1b"><span>home</span>
</button>
<br>
<br>
<button type="submit" class="button uppercase btn-1b"><span>development</span>
</button>
JS Fiddle demo.