css transitions - transicion - transición css con gradiente lineal

transition ease css

Question

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?

Answer 1

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(''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>

NOTA : Acabo de agregar el :after clase sudo solo para el pequeño marcador de posición de la imagen en primer lugar.

tener un buen estilo impresionante;)

Answer 2

¡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.

Answer 3

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

<a href="#" class="button"><span class="button-helper"></span>button</a>

Answer 4

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:

<a href="#" class="button">Button</a>

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

Answer 5

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:

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

Answer 6

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.

Answer 7

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

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

Answer 8

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