코드펜 Start Coding 버튼 테두리 효과
<style>
.button {
display: inline-block;
text-decoration: none;
color: #fff;
padding: 3px;
border-radius: 6px;
position: relative;
overflow: hidden;
}
.button::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
background-size: 50% 100%;
border-radius: inherit;
}
.button:hover::before {
animation: animate_border .75s linear infinite;
}
.button span {
display: block;
background-color: #000;
padding: 13px 20px;
border-radius: 3px;
position: relative;
z-index: 2;
}
@keyframes animate_border {
to {
transform: translateX(-50%);
}
}
</style>
<a href="#" class="button">
<span>Start Coding</span>
</a>
결과보기
https://codepen.io/Cyw00d/pen/rNpgbjX
