미니멀한 CTA 버튼 구현 + 코드 화살표로 구현

 

HTML

-

<div class="btn">
  <a href="">
    <p class="btnTxt"><b>다운로드 <span>바로가기</b></span><span class="arrow"></span></p>
  </a>
</div>

 

CSS

-

body {
  text-align: center;
  padding: 40px;
}

.btn a:hover .arrow::after {
  left: 6px;
}

.btn .btnTxt {
  display: inline-block;
  position: relative;
  padding: 10px 28px 10px 20px;
  color: #fff;
  background-color: #00cc00;
  border-radius: 8px;
}

.btn .btnTxt span {
  color: #a3f2a3;
}

.arrow {
  position: relative;
}

.arrow::after {
  position: absolute;
  left: 4px;
  top: 6px;
  content: '';
  width: 6px;  /* 사이즈 */
  height: 6px;  /* 사이즈 */
  border-top: 2px solid #fff;  /* 선 두께 */
  border-right: 2px solid #fff;  /* 선 두께 */
  transform: rotate(45deg);  /* 각도 */
  transition: .1s ease-out;
}

 

Codepen

See the Pen CTA 모션 + 화살표 코드 by TytanLee (@TytanLee) on CodePen.