CODEWITHSUNDEEP
csshovergradientgradient-descent
erysvh
erysvh

Reputation: 19

Transition on linear-gradient

I have problem with adding transition on gradient. I know that its impossible to transition gradient and I found a solution. https://keithjgrant.com/posts/2017/07/transitioning-gradients/ The background-image should be revealed in time. This button have background-color: black; and should change on gradient with hover. Any idea how can I make this on a hover pseudoclass?

.register {
  float: right;
  padding: 0 20px;
  text-transform: uppercase;
}

.register a {
  border: 1px solid white;
  border-radius: 4px;
}

.register a:hover {
  background-image: linear-gradient( to bottom right, rgb(40, 40, 40), rgb(60, 60, 60));
}
<li class="register"><a href="#">register</a></li>

Upvotes: 0

Views: 276

Answers (1)

Dylan Smyth
Dylan Smyth

Reputation: 162

You could try doing a transition from white to black (if, by your suggested code snippet, that is what you'd like).

<a class="btn btn-1">Hover me</a>

Accompanied by CSS:

.btn {
  flex: 1 1 auto;
  margin: 10px;
  padding: 30px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background: linear-gradient(90deg, var(--c1, #fff), var(--c2, #333) 51%, var(--c1, #000)) var(--x, 0)/ 200%;
  color: white;
 }


.btn:hover { --x: 100%; }

.btn-1 {
  --c1: #fff;
  --c2: #000;
}

See my fiddle for more

https://jsfiddle.net/80f7t1ej/

Upvotes: 1

Related Questions