मूल सामग्रीमा जानुहोस्

लिङ्क बटन

काम 'अर्को ठाउँमा जाने' हो तर बटनजस्तै देखिनुपर्दा चाहिने टुक्रा।

बटन र क्रिया

प्रत्यक्ष पूर्वावलोकन

स्रोत

<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 स्पेस किले चल्दैन — किबोर्डको व्यवहार फरक छ
  • पाठ मात्रको रूपमा अन्डरलाइन नहटाउनुहोस्; रङले मात्र लिङ्क चिनाउन सक्दैन

अर्को