[css] CSS - 코드펜 스타트 코딩 버튼 테두리 효과 (Codepen Start Coding Button Border Effect) = 네온사인 테두리

코드펜 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