3

Как сделать градиент на кнопку и задать градиенту вечную анимацию?

-Сделать градиент получилось, но заставить его двигаться не выходит...подскажите где я допустил ошибку?

#header-button {
  font-size: 12px;
  font-weight: bold;
  height: 50px;
  width: 171px;
  background-color: #998675;
  outline: 0;
  border: 0;
  border-radius: 5px;
  border-bottom: 3px solid #736357;
  cursor: pointer;
  margin-top: 30px;
  color: #fff;
  background-image: linear-gradient(-45deg, #998675 50%, #fff);
  -webkit-animation: gradient 3s linear infinite;
  animation: gradient 3s linear infinite;
}

@-webkit-keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%
  }
}
<button id="header-button"> GET STARTED </button>

7
  • Добавьте код с html
    – Kosta B.
    10 мая 2018 в 9:39
  • <button id="header-button"> GET STARTED </button>
    – L1ght_time
    10 мая 2018 в 9:55
  • Во-первых, не понятно что ты хочешь сделать... Во-вторых у тя ошибка в названии анимации... Разные название...
    – Air
    10 мая 2018 в 13:21
  • Это уже исправил, но оно все равно не работает...
    – L1ght_time
    10 мая 2018 в 13:23
  • Хочу, что бы белый градиент проходил по кнопке, через каждый промежуток времени
    – L1ght_time
    10 мая 2018 в 13:26

1 ответ 1

8

Я бы реализовал так...

#button-wrap {
  overflow: hidden;
  position: relative;
  height: 50px;
  width: 171px;
}

#header-button {
  position: absolute;
  height: 150px;
  width: 371px;
  outline: none;
  border: none;
  left: -200px;
  background-image: linear-gradient(-45deg, #998675 10%, #fff, #998675);
  animation: gradient 3s ease infinite;
}

@keyframes gradient {
  0% {
    left: -200px;
  }
  50% {
    left: 0px;
  }
  100% {
    left: -200px;
  }
}
<div id="button-wrap">
  <button id="header-button"></button>
</div>

Вариант два, как я понял, вроде автор этого добивался..

#button-wrap {
  overflow: hidden;
  position: relative;
  height: 50px;
  width: 171px;
}

p {
  font-size: 12px;
  font-weight: bold;
  height: 100%;
  width: 100%;
  text-align: center;
  line-height: 2;
  color: #fff;
  position: absolute;
}

#header-button {
  position: absolute;
  height: 150px;
  width: 571px;
  outline: none;
  border: none;
  left: -400px;
  top: -100px;
  background-image: linear-gradient(-45deg, #998675 50%, #fff, #998675 55%);
  animation: gradient 3s ease infinite;
}

@keyframes gradient {
  0% {
    left: -400px;
    top: -100px;
  }
  100% {
    left: 0;
    top: -10px;
  }
}
<div id="button-wrap">
  <button id="header-button">  </button>
  <p>GET STARTED</p>
</div>

2
  • Спасибо большое, вы очень помогли!)
    – L1ght_time
    10 мая 2018 в 14:13
  • Всегда пожалуйста...
    – Air
    10 мая 2018 в 14:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.