Нашел хороший хак в кодефе, который изменяет свойство opacity
, но достигает того, что исчезает от одного градиента к другому, используя псевдоэлементы. Что он делает, он устанавливает :after
, так что, когда вы изменяете непрозрачность фактического элемента, появляется элемент :after
, поэтому он выглядит так, как будто это затухание. Думал, что было бы полезно поделиться.
Оригинальный код: http://codepen.io/sashtown/pen/DfdHh
.button {
display: inline-block;
margin-top: 10%;
padding: 1em 2em;
font-size: 2em;
color: #fff;
font-family: arial, sans-serif;
text-decoration: none;
border-radius: 0.3em;
position: relative;
background-color: #ccc;
background-image: linear-gradient(to top, #6d8aa0, #8ba2b4);
-webkit-backface-visibility: hidden;
z-index: 1;
}
.button:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0.3em;
background-image: linear-gradient(to top, #ca5f5e, #d68584);
transition: opacity 0.5s ease-out;
z-index: 2;
opacity: 0;
}
.button:hover:after {
opacity: 1;
}
.button span {
position: relative;
z-index: 3;
}
body {
text-align: center;
background: #ddd;
}
BUTTON