1

Как на CSS можно сделать вот такую кнопку с градиентом, и чтобы потом при наведении происходила инверсия градиента (цвета менялись местами)? Есть ли какие-то онлайн-сервисы для генерации таких кнопок с градиентом? введите сюда описание изображения

1

2 ответа 2

2

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.btn {
  display: inline-block;
  padding: 15px 35px;
  background: linear-gradient(150deg, rgba(51, 106, 206, 1) 0%, rgba(57, 114, 213, 1) 50%, rgba(35, 90, 191, 1) 50%, rgba(1, 60, 163, 1) 100%);
  font-size: 20px;
  color: #fff;
  border-radius: 35px;
}

.btn:hover {
  background: linear-gradient(150deg, rgba(1, 60, 163, 1) 0%, rgba(35, 90, 191, 1) 50%, rgba(57, 114, 213, 1) 50%, rgba(51, 106, 206, 1) 100%);
}
<a href="#" class="btn">Button</a>

1

button{
  position: relative;
  font-size: 1.2em;
  padding: 5px 15px;
  border-radius:20px;
  color: #fff;
  outline:none;
  border:none;
  overflow: hidden;
  cursor: pointer;
}
span{
  position: relative;
  z-index: 3;
}

button:before{
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  transform:rotate(-5deg) translateY(-50%);
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
}
button:after{
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  transform:rotate(-5deg) translateY(50%);
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #0ff 0%,#0ff 50%,#f00 51%,#f00 100%);
}
button:hover:before{
   background: linear-gradient(to bottom, #0ff 0%,#0ff 50%,#f00 51%,#f00 100%);
}
button:hover:after{
   background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
}
<button type="button"><span>Задать вопрос по комплектации</span></button>

Там правильные градиенты которые надо себе выбери

Ваш ответ

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

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