Задать fade gradient border в css для элемента
Не могу никак придумать как задать стилями такой бордер сверху и снизу, что у header, что у кнопки. Спасибо. Гайды без ответа, где могу сам почитать и разобраться - приветствуются.
[
]
[1]
Ответы (1 шт):
Автор решения: UModeL
→ Ссылка
Как уже подсказали в комментарии - фоновые градиенты в помощь. Запустите сниппет, наведите курсор на кнопку, нажмите на кнопку.
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>