1
  1. Как правильно задать border кнопке в виде градиента, мой вариант нормальный, или есть лучше?

  2. Как дополнительно задать кнопке border-radius (сейчас он не применяется)?

button
{
    padding: 10px 20px;
    background: transparent;
    border: 10px solid transparent;
    border-image: linear-gradient(to right, #ff7382, #cb2fe7);
    border-image-slice: 1;
    border-radius: 20px;
}
<button>Кнопка</button>

2 ответа 2

4
  1. Нормально.
  2. border-image и border-radius не дружат.

Можно обойти это, сделав так:

button {
  padding: 10px 20px;
  border: 10px solid transparent;
  background-image: linear-gradient(to right, #ff7382, #cb2fe7);
  border-radius: 20px;
  box-shadow: 0 0 0 100px #fff inset;
  background-origin: border-box;
}
<button>Click</button>

3
  • Можно без проблем удалить background: transparent и border-image-slice: 1 и ничего не поменяется. 22 мар 2018 в 5:37
  • каюсь. скопировал из веб-инспектора все стили вместо только нужных... 22 мар 2018 в 11:28
  • Всё нормально, я удалил. 22 мар 2018 в 11:33
2

Нормально, для border-radius надо немного подправить код:

button {
  padding: 10px 20px;
  background: transparent;
  border: 10px solid transparent;
  background: linear-gradient(white, white) padding-box, linear-gradient(to right, #ff7382, #cb2fe7) border-box;
  border-radius: 20px;
}
<button>Кнопка</button>

button с transparent и оберткой:

div {
  background: red; /*Цвет для отображения transparent в button*/
  border-radius: 20px; 
  border-left: 10px solid #ff7382;
  border-right: 10px solid #cb2fe7;
  background-image: linear-gradient(to right, #ff7382, #cb2fe7), linear-gradient(to right, #ff7382, #cb2fe7);
  background-size: 100% 10px;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;  
  width: 200px;  
}

button {
  padding: 10px 20px;
  background: transparent;
  border: 0 none;
}
<div>
  <button>Кнопка</button>
</div>

5
  • А в данном случае полностью прозрачный центр кнопки можно как-то сделать? 21 мар 2018 в 15:21
  • К сожалению, нет.
    – Kniha m
    21 мар 2018 в 15:40
  • Но можно если обернуть кнопку. Добавил в ответ.
    – Kniha m
    21 мар 2018 в 15:58
  • Да, про обертку тоже думал, но проблема в том, что теперь будем видеть фон обертки... 21 мар 2018 в 16:55
  • Фон обвертке можно задать прозрачный background: transparent, в примере просто красный задал, для наглядности.
    – Kniha m
    22 мар 2018 в 6:49

Ваш ответ

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

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