Если фон заренее известен и однороден, можно просто накрыть градиент плашкой того же цвета.
Для начала соберём кнопку полностью залитую градиентом:
/* html */
<button>
Кнопка
</button>/* css */
/* Кнопка */
button {
height: 60px;
border: 0;
border-radius: 30px;
font-size: 20px;
text-transform: uppercase;
background-image: linear-gradient(
to right,
#45aee5 0%,
#6be492 100%
);
}
Теперь накроем часть кнопки белой плашкой:
/* html */
<button>
<span>Кнопка</span>
</button>/* css */
button {
/* ... */
/* Зададим отступ со всех сторон равный
желаемой толщине рамки */
padding: 4px;
}
/* Добавим белую плашку с таким же радиусом
скругления как и у самой кнопки */
button span {
display: flex;
align-items: center;
justify-content: center;
padding: 0 50px;
height: 100%;
border-radius: 30px;
background: #fff;
}
/* Спрячем плашку при наведении */
button:hover span {
background: transparent;
}
Если фон неизвестен или неравномерен, а скругления не нужны, подойдёт border-image:
/* html */
<button>
Кнопка
</button>/* css */
/* Кнопка */
button {
/* ... */
background: none;
border-width: 4px;
border-image: linear-gradient(
to right,
#45aee5 0%,
#6be492 100%
);
border-image-slice: 1;
}
button:hover {
background-image: linear-gradient(
to right,
#45aee5 0%,
#6be492 100%
);
}
В следующем совете попробуем совместить и то, и другое.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.