Related
I'm experiencing an odd bug.
Even with -webkit-transition included, color fades on safari aren't seeming to work for me. Works fine on chrome. Also, I'm using NextJS, hence the inside of the .
The color does change on hover, but only on chrome does it actually fade. On safari it's just a quick switch.
Heres a segment from my CSS
.socialThird{
#include flex-center();
height: 100%;
.iconA{ // anchor tag
height:50%;
width: 75px;
transition: all ease-in-out 0.25s;
padding: 10px 8px;
.emailSVG{ // svg
fill: #333;
filter: drop-shadow( 0 7px 3px rgba(0, 0, 0, .3));
-o-filter:drop-shadow( 0 7px 3px rgba(0, 0, 0, .3));
-ms-filter:drop-shadow( 0 7px 3px rgba(0, 0, 0, .3));
-moz-filter:drop-shadow( 0 7px 3px rgba(0, 0, 0, .3));
-webkit-filter: drop-shadow( 0 7px 3px rgba(0, 0, 0, .3));
-webkit-transition: all ease-in-out 0.25s;
-moz-transition: all ease-in-out 0.25s;
-o-transition: all ease-in-out 0.25s;
transition: all ease-in-out 0.25s;
height: 100%;
width: 100%;
&:hover{
fill: #00bcc5;
}
}
&:hover{
cursor: pointer;
transform: translate(0px, -6px);
}
}
}
Hopefully this was enough information, thanks!
please take a look at this example:
https://www.outsideonline.com/2317131/wilma-rudolph-worlds-fastest-woman
Note that when you hover over link, the background animated to fill the anchor text from bottom to top, and clears is from top to bottom when you hover away from it.
I've done something similar with my own website. The relevant CSS for it:
a {
box-shadow: inset 0 -3px 0 -1px #FFF986;
-webkit-transition: box-shadow .15s ease-in-out;
transition: box-shadow .15s ease-in-out;
color: black;
}
a:hover {
box-shadow: inset 0 -3px 0 40px #FFF986;
-webkit-transition: box-shadow .15s ease-in-out;
transition: box-shadow .15s ease-in-out;
}
This gives me a similar effect, but instead of filling from top to bottom like in the example link: The background starts to fill from all sides of the rectangle toward to center.
How do I force it to fill from top to bottom, like in the example link I shared? what am I missing?
You're changing wrong parameter:
a:hover {
box-shadow: inset 0 -40px 0 -1px #FFF986;
a {
box-shadow: inset 0 -3px 0 -1px #FFF986;
transition: box-shadow .15s ease-in-out;
color: black;
line-height: 40px;
}
a:hover {
box-shadow: inset 0 -40px 0 -1px #FFF986;
}
Hey Mickey!
Another solution that uses a 50%/50% linear gradient resized to 200%. To animate the background change the background position:
a {
background-image: linear-gradient(to top, yellow 50%, transparent 50%);
background-size: 100% 200%;
background-position: top;
transition: background-position 0.5s ease-in-out; /** I've changed the time for demo purposes **/
color: black;
}
a:hover {
background-position: bottom;
}
I'm a link
I'm another link
a {
box-shadow: inset 0 -3px 0 -1px #FFF986;
transition: box-shadow .15s ease-in-out;
color: black;
line-height: 40px;
}
a:hover {
box-shadow: inset 0 -40px 0 -1px #FFF986;
}
Hey Mickey!
This question already has answers here:
Use CSS3 transitions with gradient backgrounds
(19 answers)
Closed 1 year ago.
I'm trying to add a transition to a button I have that's background is made with css linear-gradient but it's not working.
This is the css for my button.
a.button
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#green), color-stop(100%,#a5c956));
-webkit-transition: background 5s linear;
}
a.button:hover
{
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#greenhover), color-stop(100%,#89af37))
}
If you're wondering about #green and #greenhover, I'm using .less to make my css.
Anything wrong with this? Any ideas?
Sadly, you really can't transition gradients for now.
So, the only workable workaround is using an extra element with needed gradient and transition it's opacity:
a.button {
position: relative;
z-index: 9;
display: inline-block;
padding: 0 10px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(green), to(#a5c956));
background: -webkit-linear-gradient(top, green, #a5c956);
background: -moz-linear-gradient(top, green, #a5c956);
background: -o-linear-gradient(top, green, #a5c956);
background: linear-gradient(top, green, #a5c956);
}
.button-helper {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background: -webkit-gradient(linear, 0 0, 0 100%, from(lime), to(#89af37));
background: -webkit-linear-gradient(top, lime, #89af37);
background: -moz-linear-gradient(top, lime, #89af37);
background: -o-linear-gradient(top, lime, #89af37);
background: linear-gradient(top, lime, #89af37);
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
}
a.button:hover .button-helper {
opacity: 1;
}
<span class="button-helper"></span>button
it's tricky.. and of course tricky is cool ;)
okay.. i got a solution. and it's basically done via amazing :before selector
#cool-hover{
width: 120px;
height: 120px;
display: block;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
margin: 0px auto 24px auto;
transition: all 0.5s;
position: relative;
overflow: hidden;
}
#cool-hover:before{
border-radius: inherit;
display: block;
width: 200%;
height: 200%;
content: '';
position: absolute;
top: 0;
left: 0;
background: linear-gradient(135deg, #21d4fd 25%, #b721ff 75%);
transition: all 0.5s;
transform: translate(-25%, -25%);
z-index: 0;
}
#cool-hover:after{
border-radius: 9px;
display: block;
width: 108px;
height: 108px;
margin: 6px;
background: url('https://i.imgur.com/w0BjFgr.png');
background-size: cover;
content: '';
position: absolute;
top: 0; left: 0;
z-index: 1;
}
#cool-hover:hover:before{
transform: translate(-25%, -25%) rotate(-180deg);
}
#cool-hover:hover{
box-shadow: 0 0 35px rgba(0,0,0,0.3);
}
<div id="cool-hover"></div>
NOTE : i just added the :after sudo class just for the small on top image placeholder purpose..
have a nice awesome styling ;)
I know this pretty old but I could not find any good solution yet. So here is my solution
First Make gradient on ":before and hide it with opacity then transition opacity 1 on hover.
https://jsfiddle.net/sumon380/osqLpboc/3/
.button {
text-decoration: none;
padding: 10px 25px;
font-size: 20px;
color: #333;
display: inline-block;
background: #d6e9eb;
position: relative;
z-index: 1;
transition: color 0.3s ease-out;
}
.button:before {
background: #91a5f4;
background: linear-gradient(135deg, #91a5f4 0%, #b08cf9 86%);
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease-out;
}
.button:hover:before {
opacity: 1;
}
.button:hover {
color: #fff;
}
<a class="button" href="#">Button</a>
You can fake gradient transitions using drop shadows!
For instance, from one of my pages:
c {
color: #FFF;
background: #000;
border-style:solid;
border-color:#CCC;
border-width: 0 0 0 1px;
box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-o-box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 2px 2px 2px #555,
inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-moz-transition: background-color .5s ease;
-o-transition: background-color .5s ease;
-webkit-transition: background-color .5s ease-in-out;
transition: background-color .5s ease;
}
Followed by:
c:hover {
color:#FFF;
background: #505;
position:relative;
top:1px;
box-shadow: -1px -1px -1px #555,inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
-moz-box-shadow: -1px -1px -1px #555,inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
-o-box-shadow: -1px -1px -1px #555, inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
-webkit-box-shadow: 1px -1px -1px #555, inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
}
Here, you are essentially using an inset shadow as a Photoshop-like mask, causing a gradient effect on the underlying element. On hover, you invert the effect.
If you're doing the slight highlight when hovering the button there is a much simpler solution. You can just nudge the gradient down a bit and have the background-color be the same as the top color of your gradient: http://cdpn.io/oaByI
It's pretty limited I know, but if works well for that use case.
I know this question is pretty old, but I found a good way to animate basic gradients that will work in some cases.
This method will let you animate a change in color of the gradient but not a change in the position of the color stops.
https://jsfiddle.net/62vzydeh/
HTML:
<div class="button">
Click Me!
</div>
CSS:
.button {
width: 200px;
height: 30px;
margin: 50px;
padding-top: 10px;
color: #C0C0C0;
background: linear-gradient(to left, #F8F8F8, transparent 30%);
background-color: #808080;
text-align: center;
font-family: sans-serif;
cursor: pointer;
transition: background-color 500ms;
}
.button:hover {
background-color: #A0A0A0;
}
a hacky way i tried was putting lots of <spans> to replicate "position", CSS only hack here: https://codepen.io/philipphilip/pen/OvXEaV
9 years, but this time, hope my styled-components can help someone:
import React, { ReactNode } from 'react'
import { Button as ButtonUI } from "#your-library-ui"
import styled from 'styled-components'
type Props = {
onClick?: () => void;
children?: ReactNode;
};
const Button = ({onClick, children}: Props) => (
<StyledButton onClick={onClick} >
{children}
<ButtonHelper />
</StyledButton>
)
export default Button
const ButtonHelper = styled.span`
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 5px;
background: linear-gradient(to right, #5ab0f4, #1273ea)!important;
transition: opacity 0.2s linear;
`;
const StyledButton = styled(ButtonUI)`
position: relative;
z-index: 1;
background: linear-gradient(to right, #1273ea, #1c94f4)!important;
color: #fff;
&:hover ${ButtonHelper} {
opacity: 1;
}
`;
And start using your new designed component with extra effect! Thanks to #kizu for the suggestion.
you must have same style in source and changed style in target.
like
a {
background: transparent;
background: linear-gradient(transparent,transparent);
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a:hover
{
background: #abc07c;
background: linear-gradient(#c5db95,#88a743);
}
I have this basic switch toggle script which I found online and have implemented into my project. My sites background seems to be a bit too bright for the button to sit nicely without it being difficult too see, so my question is, how can I edit this switch toggle CSS code to make the it a little bit darker so I can use it on my site?
I'm only really worried about darkening the actual toggle button - that's the worst part and I have tried fiddling with the script but just cannot seem to find any part that changes the toggle?
Here is my JSfiddle
.container {
margin: 50px auto;
width: 280px;
text-align: center;
}
.container > .switch {
display: block;
margin: 12px auto;
}
.switch {
position: relative;
display: inline-block;
vertical-align: top;
width: 56px;
height: 20px;
padding: 3px;
background-color: #03C;
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
background-image: -webkit-linear-gradient(top, #eeeeee, white 25px);
background-image: -moz-linear-gradient(top, #eeeeee, white 25px);
background-image: -o-linear-gradient(top, #eeeeee, white 25px);
background-image: linear-gradient(to bottom, #eeeeee, white 25px);
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
-webkit-transition-property: opacity background;
-moz-transition-property: opacity background;
-o-transition-property: opacity background;
transition-property: opacity background;
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: white;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #47a8d8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 18px;
height: 18px;
background: white;
border-radius: 10px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
background-image: -webkit-linear-gradient(top, white 40%, #f0f0f0);
background-image: -moz-linear-gradient(top, white 40%, #f0f0f0);
background-image: -o-linear-gradient(top, white 40%, #f0f0f0);
background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
.switch-handle:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: #f9f9f9;
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
background-image: -webkit-linear-gradient(top, #eeeeee, white);
background-image: -moz-linear-gradient(top, #eeeeee, white);
background-image: -o-linear-gradient(top, #eeeeee, white);
background-image: linear-gradient(to bottom, #eeeeee, white);
}
.switch-input:checked ~ .switch-handle {
left: 40px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-green > .switch-input:checked ~ .switch-label {
background: #4fb845;
}
You need to change backgroud:#yourcolorcode of class.switch-label
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #000;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
-webkit-transition-property: opacity background;
-moz-transition-property: opacity background;
-o-transition-property: opacity background;
transition-property: opacity background;
}
Also if you want to change the color of the circle of the radio button update the .switch-handle and .switch-handle:before classes
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 18px;
height: 18px;
background: #000;
border-radius: 10px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
background-image: -webkit-linear-gradient(top, #000 40%, #000);
background-image: -moz-linear-gradient(top, #000 40%, #000);
background-image: -o-linear-gradient(top, #000 40%, #000);
background-image: linear-gradient(to bottom, #000 40%, #000);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
.switch-handle:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: #000;
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
background-image: -webkit-linear-gradient(top, #eeeeee, #000);
background-image: -moz-linear-gradient(top, #eeeeee, #000);
background-image: -o-linear-gradient(top, #eeeeee, #000);
background-image: linear-gradient(to bottom, #eeeeee, #000);
}
I hope this is what you want https://jsfiddle.net/mam1yj1f/8/
add
.switch {
position: relative;
display: inline-block;
vertical-align: top;
width: 56px;
height: 20px;
padding: 3px;
background-color: #03C;
border-radius: 18px;
cursor: pointer;
background-color: black;
}
to your CSS style, jsfiddle
Just change the switch label color as follows:
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: magenta;
....
}
P.D. I used magenta color just for making the example
You want to edit the .switch-handle and .switch-handle:before.
This makes it darker, you just need to fiddle about the background colours to get what you want.
.switch-handle::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0px 0px -6px;
width: 12px;
height: 12px;
/* change these!*/background: #F9F9F9 linear-gradient(to bottom, #A8A8A8, #959595) repeat scroll 0% 0%;
border-radius: 6px;
box-shadow: 0px 1px rgba(0, 0, 0, 0.02) inset;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 18px;
height: 18px;
/* change these!*/background: #FFF linear-gradient(to bottom, #CCC 40%, #F0F0F0) repeat scroll 0% 0%;
border-radius: 10px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
transition: left 0.15s ease-out 0s;
}
For some reason, all of my buttons are receiving a grey outline and I'm completely unsure of the source of it. It is not a hover or active thing, it is an always kind of thing. I can also note that it is not the on-click border that a browser adds to buttons, as I've removed that with a :focus value.
This is in Google Chrome. I'm not sure if the issue is present in other browsers.
.button_default {
display: inline-block;
background: #1188f0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#1188f0));
background: -moz-linear-gradient(center top, #2e8cff 0%, #1188f0 100%);
-webkit-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
-moz-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
text-shadow: 0px 1px 0px #006ac7;
padding: 5px 15px;
text-transform: uppercase;
text-align: center;
color: #ffffff;
font-weight: bold;
}
.button_default:hover {
background: #1995fa;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#2e8cff));
background: -moz-linear-gradient(center top, #2e8cff 0%, #2e8cff 100%);
}
.button_default:active {
cursor: wait;
-webkit-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
-moz-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
-webkit-transition: background-position 0.3s linear;
-moz-transition: background-position 0.3s linear;
-o-transition: background-position 0.3s linear;
transition: background-position 0.3s linear;
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
transform: translateY(3px);
}
.button_default:focus {
outline:0;
}
<form method="link" action="create/create.php">
<input class="button_default" type="submit" value="CREATE NEW">
</form>
Remove the default border from the buttons: border: none.
.button_default {
display: inline-block;
background: #1188f0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#1188f0));
background: -moz-linear-gradient(center top, #2e8cff 0%, #1188f0 100%);
-webkit-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
-moz-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
text-shadow: 0px 1px 0px #006ac7;
padding: 5px 15px;
text-transform: uppercase;
text-align: center;
color: #ffffff;
font-weight: bold;
}
.button_default:hover {
background: #1995fa;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#2e8cff));
background: -moz-linear-gradient(center top, #2e8cff 0%, #2e8cff 100%);
}
.button_default:active {
cursor: wait;
-webkit-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
-moz-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
-webkit-transition: background-position 0.3s linear;
-moz-transition: background-position 0.3s linear;
-o-transition: background-position 0.3s linear;
transition: background-position 0.3s linear;
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
transform: translateY(3px);
}
.button_default:focus {
outline:0;
}
input[type="submit"].button_default { border: none;}
<form method="link" action="create/create.php">
<input class="button_default" type="submit" value="CREATE NEW">
</form>
The button has a default border, add border: 0 to your CSS
.button_default {
display: inline-block;
background: #1188f0;
...
...
color: #ffffff;
font-weight: bold;
border: 0;
}
You could simply remove the border:
.button_default {
border:none;
}
This question was previously posed here: Button border & background