CSS Buttons

Basic Button Styling

किसी button को style करना browser default appearance (border, background) हटाकर और अपनी खुद की padding, background-color, और border-radius लागू करके शुरू होता है।

Explicitly cursor: pointer set करना अच्छी practice है भले ही buttons default रूप से पहले से एक pointer cursor दिखाते हों, क्योंकि यह तब ज़रूरी हो जाता है जब आप किसी link को button की तरह style करें।

उदाहरण: Basic Button Styling

<style>
button {
  border: none;
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
}
</style>
<button>Click Me</button>

Hover और Active States

किसी button को उन states के लिए visible feedback चाहिए जिनसे कोई user असल में interact करता है: mouse-over के लिए :hover (आमतौर पर थोड़ा darker या lighter background) और click किए जाने के moment के लिए :active (अक्सर एक थोड़ा और darker shade, या एक physical press simulate करने के लिए एक छोटा scale-down transform)।

उदाहरण: Hover and Active States

<style>
button {
  background: royalblue;
  color: white;
  border: none;
  padding: 10px 20px;
}
button:hover {
  background: #3b5fd6;
}
button:active {
  background: #2a49b0;
  transform: scale(0.98);
}
</style>
<button>Press Me</button>

Keyboard Users के लिए Focus State

किसी page में tab करते keyboard users के लिए एक visible :focus (या :focus-visible) outline ज़रूरी है — बिना किसी replacement के outline: none से इसे पूरी तरह हटाना एक common accessibility failure है।

box-shadow या एक styled outline इस्तेमाल करके एक custom focus ring buttons को अच्छा दिखने वाला और accessible दोनों बनाए रखता है।

उदाहरण: Focus State for Keyboard Users

<style>
button:focus-visible {
  outline: 3px solid orange;
  outline-offset: 2px;
}
</style>
<button>Tab to me</button>

Disabled Button Styling

disabled attribute ज़्यादातर browsers में default रूप से पहले से ही clicks रोक देता है और cursor को not-allowed में बदल देता है, लेकिन एक disabled button को visually भी अलग दिखना चाहिए, आमतौर पर reduced opacity और एक muted color के साथ, ताकि users एक नज़र में समझ जाएँ कि इसके साथ interact नहीं किया जा सकता।

उदाहरण: Disabled Button Styling

<style>
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>
<button disabled>Unavailable</button>

Button Size और Shape Variants

असली interfaces को आमतौर पर कई button variants चाहिए होते हैं: एक primary filled button, एक secondary outlined button (transparent background, colored border), और size variants (small/large) जो padding और font-size को साथ में adjust करके control किए जाते हैं ताकि button proportionally scale हो।

उदाहरण: Button Size and Shape Variants

<style>
.primary { background: royalblue; color: white; padding: 10px 20px; border: none; }
.secondary { background: transparent; border: 2px solid royalblue; color: royalblue; padding: 10px 20px; }
.small { font-size: 12px; padding: 4px 10px; }
</style>
<button class="primary">Primary</button>
<button class="secondary">Secondary</button>
<button class="primary small">Small</button>