0

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

[введите сюда описание изображения] [1]введите сюда описание изображения

1
  • 2
    Вы можете использовать background-image: linear-gradient Commented 27 мая в 23:08

1 ответ 1

2

Как уже подсказали в комментарии - фоновые градиенты в помощь. Запустите сниппет, наведите курсор на кнопку, нажмите на кнопку.

body { background-color: #404040; }

button {
  padding: 1em 2em;
  border: 2px solid transparent;
  border-radius: 1em;
  font: 20px sans-serif;
  color: #fff;
  background: 
    linear-gradient(to top, #35094a, #7c15ab) padding-box,
    linear-gradient(to right, #9e57bf00, #cd93e800, #9e57bf00) border-box,
    linear-gradient(to top, #35094a, #7c15ab) border-box;
}
button:hover {
  background: 
    linear-gradient(to top, #35094a, #7c15ab) padding-box,
    linear-gradient(to right, #9e57bf00, #cd93e8, #9e57bf00) border-box,
    linear-gradient(to top, #35094a, #7c15ab) border-box;
}
button:active {
  background: 
    linear-gradient(to top, #35094a, #7c15ab) padding-box,
    linear-gradient(to right, #9e57bf, #cd93e8, #9e57bf) border-box,
    linear-gradient(to top, #35094a, #7c15ab) border-box;
}
<button>Label</button>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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