transición css con gradiente lineal

Estoy tratando de agregar una transición a un botón. El fondo está hecho con css linear-gradient pero no está funcionando.

Este es el CSS de mi botón.

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)) } 

Si te estás preguntando sobre @green y @greenhover, estoy usando .less para hacer mi CSS.

¿Hay algún problema con esto? ¿Algunas ideas?

Lamentablemente, por ahora no puedes graduar la transición.

Por lo tanto, la única solución factible es usar un elemento extra con gradiente necesario y la transición es opacidad:

 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; } 
 button 

es complicado … y, por supuesto, complicado es genial;)

de acuerdo … tengo una solución. y básicamente se hace a través de 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('http://sofes.miximages.com/css-transitions/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); } 
 

¡Puedes simular transiciones de degradado usando sombras paralelas! Por ejemplo, desde una de mis páginas:

 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; } 

Seguido por:

 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); } 

Aquí, esencialmente está utilizando una sombra insertada como una máscara tipo Photoshop, lo que provoca un efecto de degradado en el elemento subyacente. Al desplazarse, invierte el efecto.

Si está haciendo un ligero resalte al pasar el botón, hay una solución mucho más simple. Puede empujar ligeramente el degradado un poco y hacer que el color de fondo sea el mismo que el color superior de su degradado: http://cdpn.io/oaByI

Es bastante limitado, lo sé, pero si funciona bien para ese caso de uso.

Sé que esta pregunta es bastante antigua, pero encontré una buena manera de animar gradientes básicos que funcionarán en algunos casos.

Este método le permitirá animar un cambio en el color del degradado, pero no se detiene un cambio en la posición del color.

https://jsfiddle.net/62vzydeh/

HTML:

 
Click Me!

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; } 

Sé que es bastante viejo, pero aún no he podido encontrar una buena solución. Así que aquí hice una buena solución para esto.

Primero, seleccione degradado “: antes y ocúltelo con opacidad, luego opacidad de transición 1 al pasar el cursor sobre él.

https://jsfiddle.net/sumon380/osqLpboc/3/

HTML:

 Button 

CSS:

 .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; } 

una forma hacky que probé fue poner muchos para replicar “posición”, CSS solo hackeo aquí: https://codepen.io/philipphilip/pen/OvXEaV

debes tener el mismo estilo en la fuente y cambiar el estilo en el objective.

me gusta

 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); }