CSS кнопка с градиентом

* { 
  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>

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>