본문 바로가기
명함 만들기 캐릭터 모음 16가지 디자인 · PNG / SVG / PDF

링크 버튼

하는 일은 '다른 곳으로 가기'인데 버튼처럼 보여야 할 때 쓰는 조각.

버튼 · 액션

실제 미리보기

출처

<a class="dc-lbtn" href="#">요금제 보기</a>
.dc-lbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dc-2);
  min-height: 44px; padding: 0 var(--dc-5);
  border: 1px solid var(--dc-brand); border-radius: var(--dc-r-sm);
  background: var(--dc-brand); color: var(--dc-text-on);
  font-family: var(--dc-font); font-size: 15px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background var(--dc-fast);
}
.dc-lbtn:hover { background: var(--dc-brand-hi); border-color: var(--dc-brand-hi); }
.dc-lbtn--outline {
  background: transparent; border-color: var(--dc-line-field); color: var(--dc-text);
}
.dc-lbtn--outline:hover { background: var(--dc-sunken); border-color: var(--dc-text-sub); }
.dc-lbtn--text {
  display: inline; white-space: normal;
  min-height: 0; padding: 0; border: 0; background: transparent;
  color: var(--dc-brand-text); font-weight: 500;
  text-decoration: underline; text-underline-offset: .15em;
}
.dc-lbtn--text:hover { background: transparent; }
.dc-lbtn__icon { width: 16px; height: 16px; flex: none; }

이렇게 씁니다

  • 이동이면 a, 동작이면 button — 모양이 아니라 하는 일로 고른다
  • 새 창으로 열면 그 사실을 숨은 글이나 아이콘으로 미리 알린다
  • 갈 곳이 없으면 href 를 비워 두지 말고 button 을 써라

주의할 점

  • 버튼처럼 보여도 a 는 스페이스바로 눌리지 않는다 — 키보드 동작이 다르다
  • 글자만 변형에서 밑줄을 지우지 마라. 색만으로는 링크인지 알 수 없다

다음에 볼 것