I am trying to button background colour transition on hover.
I observed that when I hover the button it is showing different colour in delay time.
Below is the code.
.button {
background-color: aqua;
transition: background-color 1s ease 0.5s;
width: 500px;
height: 500px;
font-size: 24pt;
}
.button:hover {
background-color: blue;
}
.button:active {
background-color: rgb(216, 36, 4);
}
<button type="button" class="button">button</button>
If you remove delay time, also you will observe the flickering effect when you hover or select.
Here is the video on how it is behaving. https://youtu.be/O0q-SK-eejk
Kindly, Help me to solve it, not to show different colour in delay time.
The reason you see the gray color is because of the default styles added by the browser for the background property. Try the following code.
.button {
background: inherit;
background-color: aqua;
transition: background-color 1s ease 0.5s;
width: 500px;
height: 500px;
font-size: 24pt;
}
.button:hover {
background: inherit;
background-color: blue;
}
.button:active {
background-color: rgb(216, 36, 4);
}
<button type="button" class="button">button</button>
Related
Below is a CSS code snippet to transit a button from #33ae74 to #1ce when hover it.
.button {
font-size: 3em;
font-family: inherit;
border: none;
background-color: #33ae74;
padding: 0.5em 0.75em;
}
.button:hover {
background-color: #1ce;
transition: background-color 2s ease-out;
}
It works well. My question is: before mouse hover,there is no transition bind to the button,why transition works when hover it? In another case, when hover, transition bind to the button, meanwhile the background color also be changed to #1ce immediately,so there should no color be transited. but why we could still see the transition?
that's very simple just make the transition on the original element. By doing that the transition will work when you hover and will work when the over is done.
.button {
font-size: 3em;
font-family: inherit;
border: none;
background-color: #33ae74;
padding: 0.5em 0.75em;
transition: background-color 2s ease-out;
}
.button:hover {
background-color: #1ce;
}
<button class="button">hover over me</button>
I have a dropdown where the overflow text is gradient out. There's transition applied to the selection's wrapper but now it looks a bit odd when it's hovered out. How can I make it look better?
html snippet:
<div class="durationDropdown">
<select role="listbox" class="durationSelect">
<option value="0">Less than 1 month</option>
</select>
</div>
css snippet:
.container {
width: 150px;
}
.durationDropdown {
padding: 0px;
flex: 1;
text-align: left;
position: relative;
cursor: pointer;
height: 5.1875rem;
transition: 250ms;
border: 1px solid #eee;
}
.durationDropdown::after {
content: "";
display: block;
width: 40px;
top: 0%;
right: 0;
height: 100%;
position: absolute;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 63%);
pointer-events: none;
}
.durationDropdown:hover::after,
.durationDropdown:active::after {
background: none;
}
.durationDropdown:hover {
background: black;
}
Here's my fiddle where you can see how it looks like and the rest of the css in the fiddle. Any help/suggestions would be great!
I am afraid you cannot add transition to the gradient, see details here Use CSS3 transitions with gradient backgrounds.
What you really see it's smooth changing of the 'color' property but not the gradient transition. If you want to hide a part of the sentence with a gradient and have a smooth transition on it, you could do like so:
Add transition to 'durationDropdown::after' element and replace 'background: none;' by 'opacity: 0;' like so:
.durationDropdown::after {
...
transition: 250ms opacity ease-in-out;
...
}
.durationDropdown:hover::after,
.durationDropdown:active::after {
/* background: none; */
opacity: 0;
}
So I have the following situation for a button I am making:
<i class="fas fa-angle-left"></i> Previous
which can be seen fully on https://jsfiddle.net/pre3xzL5/ (<i>-tag from Font Awesome).
Basically I want the text inside the button to be centered from the beginning (it isn't now), and then when I hover the arrow (<i>-tag) appears and comes from the middle to the left, and then the next should also go from the middle (centered as it should be) at moved a bit to the right. However, now, the next is starting at the place where it should be when hovered. It makes sense since the <i>-tag is taking up space, but that's the question: Can I correct this ?
I have done it using margins instead. But I've read that using margins for transitions and such is bad practice, and not good for performance - hence the try with translate.
These two transition statements are the only ones you need, set initially on the relevant elements. The position absolute changed to position relative on hover gets you the effect you want.
.button
{
transition: all 0.15s ease-in-out;
i
{
position:absolute;
transition: all 0.15s ease-in-out;
}
}
.button:hover
{
i
{
position:relative;
}
}
html:
<i class="fas fa-angle-left"></i> Previous
scss:
.button {
background: red;
padding: 20px 20px;
color: white;
text-transform: uppercase;
border-radius: 50px;
cursor: pointer;
position: relative;
justify-self: center;
display: inline-block;
width: 140px;
text-decoration: none;
text-align: center;
transition: all 0.15s ease-in-out;
border: 1px red solid;
i {
position:absolute;
opacity: 0.0;
transition: all 0.15s ease-in-out;
transform: translateX(.5em);
}
}
.button:hover {
background: red;
border: 1px black solid;
i {
position:relative;
transform: translateX(0px);
opacity: 1.0;
}
}
https://jsfiddle.net/pre3xzL5/1/
I have two boxes that when you hover over, the background opacity should change, but the foreground text opacity should not change. I know the solution to this is on hover, set the rgba to the background color and add the opacity. Example:
#join:hover {
rgba(0, 102, 255, .4)
}
However, the thing is that in jquery the background of each of the boxes change when clicked on, so using a solid and specific color is not an option. I'd like to use just opacity: .4 so that the opacity is the same regardless of the background color of each box.
When I use opacity on hover, the opacity of the text in each box changes as well. To get around this, I tried using z-index/position: relative and setting the text (#join-text, #learn-text) to a higher z-index and the background (#join, #learn) to a lesser z-index. This did not render the correct results.
I also tried using pseudo class ::before like #join:hover::before but that also did not render the correct results, the position:absolute changed the position of the buttons.
Is there any way to change the opacity on hover ONLY for the background, using the opacity: .4 property? Any input would be greatly appreciated.
Find code here: https://jsfiddle.net/Lsqjwu15/1/
You can use CSS3 :before selector
#join:before {
background: #0066ff;
}
#learn:before {
background: #ffb31a;
}
.rectangle:before {
content: "";
width: inherit;
height: inherit;
position: absolute;
}
.rectangle:hover:before {
opacity: .4;
}
JSFiddle
You could make a workaround with pseudo elements (changed the "join" box):
.rectangle {
position:relative;
height: 200px;
width: 80px;
border: 1px solid transparent;
}
#join:before {
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background: #0066ff;
}
#learn {
background: #ffb31a;
}
#join:hover:before,
#learn:hover {
opacity: .4;
}
.vertical {
text-align: center;
color: #000000;
font-size: 30px;
font-weight: bold;
white-space: nowrap;
transform: rotate(-90deg);
}
#join-text {
margin-top: 110px;
}
#learn-text {
margin-top: 125px;
}
<div class="rectangle" id="join">
<div class="vertical" id="join-text">
Join Here
</div>
</div>
<div class="rectangle" id="learn">
<div class="vertical" id="learn-text">
Learn More
</div>
</div>
Could you make the text "rgba(0,0,0,1) !important" to override the background opacity? would that still fade with the background?
However, the thing is that in jquery the background of each of the boxes change when clicked on, so using a solid and specific color is not an option.
You haven't specified HOW the background colors are changed or what they are initially but using RGBA Colors throughout seems simple enough. JQ is perfectly capable of handing RGBA.
.rectangle {
height: 200px;
width: 80px;
border: 1px solid transparent;
}
#join {
background: rgba(0, 102, 255, 1)
}
#learn {
background: rgba(255, 179, 26, 1)
}
#join:hover {
background: rgba(0, 102, 255, .4)
}
#learn:hover {
background: rgba(255, 179, 26, .4)
}
.vertical {
text-align: center;
color: #000000;
font-size: 30px;
font-weight: bold;
white-space: nowrap;
transform: rotate(-90deg);
}
#join-text {
margin-top: 110px;
}
#learn-text {
margin-top: 125px;
}
<div class="rectangle" id="join">
<div class="vertical" id="join-text">
Join Here
</div>
</div>
<div class="rectangle" id="learn">
<div class="vertical" id="learn-text">
Learn More
</div>
</div>
If there is something else you haven't told us then if you want a solution to your code, you're going to have to reproduce the exact issue including the JS/JQ
I've been procrastinating by trying to make a fancier HTML checkbox, using Font Awesome for icons. I'm almost happy with this: (CodePen)
HTML
<input type="checkbox" id="cb"/>
<label for="cb">
<i class='icon-check-sign'></i>
</label>
CSS
#cb {
display: none;
}
#cb + label {
font-size: 64px;
color: #002b36; /* black */
transition: color 1s;
}
/* hover */
#cb + label:hover > i {
color: #268bd2; /* blue */
transition: color 1s;
}
/* checked */
#cb:checked + label > i {
color: #859900; /* green */
transition: color 1s;
}
/* checked + hover */
#cb:checked + label:hover > i {
color: #dc322f; /* red */
transition: color 1s;
}
(The colours and transition duration are exaggerated to make the issue more visible.)
My problem is that the colour changes smoothly when going from the default state to the hover state (the cursor is moved over the icon), from hover to checked (the icon is clicked), and from hover+checked to checked (the cursor is moved away). However, when going from hover back to default (the mouse cursor is moved away from an unchecked icon), the color doesn't transition but changes immediately.
Why does that happen and how could it be fixed? Bonus question: can this effect be somehow done without as much extra markup? (The <i> and the <label>.)
(I also suppose this would be more usable if I swapped between a checked and unchecked icon, but that seems like it would require chaining two transitions on different elements and I've no idea if that's even possible with CSS alone.)
You're missing a > i
#cb + label > i {
font-size: 32px;
color: #002b36; /* black */
transition: color 1s;
}
Updated CodePen
if you have a transtion in the :hover like this
something:hover{
transition: ...;
}
The transition will only apply when you hover so you need to put the transition in the default style for it to transition all states
like this
something{
color: red;
transition: all 200ms ease;
}
something:hover{
color: blue;
}
So in your case you need to add the following styles.
#cb + label i {
transition: color 1s;
}
solution
demo: http://jsfiddle.net/SuunK/2/
the markup:
<input type=checkbox id=cb hidden>
<label for=cb></label>
the style:
[for=cb] {
padding: 5px 16px;
position: relative;
border-radius: 4px;
background-color: black;
transition: background-color 1s;
}
[for=cb]:before,[for=cb]:after{
content:'';
position:absolute;
}
[for=cb]:before{
width: 6px;
height: 10px;
background: white;
-webkit-transform: rotateZ(-45deg);
left: 8px;
bottom: 6px;
}
[for=cb]:after{
width: 5px;
height: 16px;
background: white;
-webkit-transform: rotateZ(45deg);
right: 13px;
bottom: 5px;
}
[for=cb]:hover{
background-color: #268bd2; /* blue */
}
/* checked */
#cb:checked + label{
background-color: #859900; /* green */
}
/* checked + hover */
#cb:checked + label:hover{
background-color: #dc322f; /* red */
}