Как реализовать белую рамку вокруг кнопки с помощью CSS
2 ответа
На картинке явно просматривается конический градиент:
body { background-color: #6e8591; }
button {
position: relative;
padding: 0.5em 1em;
border-radius: 0.2em;
font-weight: bold;
outline: none;
border: none;
color: #fff;
background-color: #1d3a47;
}
button::before {
content: "";
position: absolute;
top: -0.2em; left: -0.2em;
z-index: -1;
height: calc(100% + 0.4em);
width: calc(100% + 0.4em);
border-radius: 0.4em;
background-image: conic-gradient(#1d3a47 10%, #ffff);
}
<button>ПОДРОБНЕЕ</button>
Можно как-то так / Цвета брал от балды, думаю идея понятна
body {
background-color: #000;
}
button {
height: 40px;
line-height: 40px;
min-width: 110px;
position: relative;
background: linear-gradient(90deg, #fff, #000 50%, #000);
color: #fff;
text-transform: uppercase;
border: 0;
border-radius: 6px;
}
button span {
position: absolute;
top: 2px;
left: 2px;
border-radius: 6px;
width: calc(100% - 4px);
height: calc(100% - 4px);
background-color: #000;
}
<button><span>Подробнее</span></button>