Как создать такой градиент для кнопки?

Question

Answer 1

Главная сложность - это подбор цветов. Но, если макет делал грамотный дизайнер, то все значения градиентов будут указаны.

/* For example only --> */ body { margin: 0; min-height: 100vh; display: grid; place-items: center; }

button {
  display: block;
  height: 80px; width: 435px;
  border: none; border-radius: 24px;
  font: bold 24px/1em 'Trebuchet MS', sans-serif;
  color: #fff;
  background-color: #fd597b;
  background-image: radial-gradient( 100% 100% at 50% -10%, #fef257 0% 10%, #fef25700 66%), radial-gradient(100% 100% at 40% 100%, #fd933c, #fd933c00 100%), linear-gradient(90deg, #fd597b 25%, #fe6e38);
  background-position: 50% 0%, 50% 100%, 100% 0%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: 0 30px 60px -30px #fe9c39;
  transition: 0.4s ease-in-out;
}
button:hover {
  background-size: 200% 100%, 100% 40%, 300% 100%;
  box-shadow: 0 20px 40px -20px #fe9c39;
}

<button>Add to cart</button>

БЛОГ НА HUSL

Как создать такой градиент для кнопки?

Ответы (1 шт):