CSS
border 그라데이션 + radius
Kale_coding
2022. 4. 5. 16:57
HTML
<a href="#" class="btn">
<p>button</p>
</a>CSS
.btn {
--border-width: 1px;
--border-radius: 20.5px;
width: 188px;
height: 41px;
border: 0;
background:linear-gradient(91.45deg, #833AB4 3.65%, #FD1D1D 50.45%, #FCB045 98.37%) border-box;
position: relative;
border-radius: var(--border-radius);
z-index: 1;
}
.btn::before {
content: "";
display: block;
width: calc(100% - calc(var(--border-width)*2));
height: calc(100% - calc(var(--border-width)*2));
background: #fff;
position: absolute;
top: var(--border-width);
left: var(--border-width);
border-radius: calc(var(--border-radius) - var(--border-width));
z-index: -1;
}