Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS border-radius से बटन पर गोल कोने जोड़ें

CSS border-radius प्रॉपर्टी का उपयोग करके बटन (या किसी भी तत्व) के कोनों को गोल बनाया जा सकता है। यह बटन को आधुनिक और आकर्षक रूप देता है।

उदाहरण

नीचे दिए गए उदाहरण में, बटन पर border-radius: 15px लागू करके गोल कोने बनाए गए हैं।

<!DOCTYPE html>
<html>
<head>
  <style>
    .button {
      background-color: yellow;
      color: black;
      text-align: center;
      font-size: 15px;
      padding: 20px;
      border-radius: 15px;
    }
  </style>
</head>
<body>
  <h2>Result</h2>
  <p>Click below for result:</p>
  <button class="button">Result</button>
</body>
</html>

border-radius के मान:

  • px मान: निश्चित गोलाई (जैसे 15px)
  • % मान: सापेक्ष गोलाई (जैसे 50% से गोला)
  • चार मान: border-radius: 10px 20px 30px 40px (प्रत्येक कोने के लिए अलग)

नोट: <button> एलिमेंट पर सीधे भी लागू कर सकते हैं, लेकिन क्लास का उपयोग करना बेहतर अभ्यास है।

  1. CSS से  मोर  बटन (ड्रॉपडाउन मेनू) कैसे बनाएं? CSS से 'मोर' बटन (ड्रॉपडाउन मेनू) कैसे बनाएं?

    मोर बटन एक ड्रॉपडाउन मेनू ट्रिगर करता है जो अतिरिक्त नेविगेशन लिंक दिखाता है। यह नेविगेशन बार में स्थान बचाने के लिए उपयोगी होता है। इस उदाहरण में Font Awesome आइकन का उपयोग करके कैरेट डाउन आइकन जोड़ा गया है। उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=w

  1. CSS से सर्च बटन (आइकन के साथ) कैसे बनाएं? CSS से सर्च बटन (आइकन के साथ) कैसे बनाएं?

    सर्च बटन में इनपुट फील्ड और सबमिट बटन साथ-साथ होते हैं। बटन में Font Awesome सर्च आइकन होता है। फ्लोट लेआउट से 80/20 चौड़ाई विभाजन, नीला बटन, होवर पर गहरा नीला। उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1> <lin

  1. CSS से होवर पर ट्रांज़िशन कैसे जोड़ें? CSS से होवर पर ट्रांज़िशन कैसे जोड़ें?

    CSS से होवर पर ट्रांज़िशन जोड़ने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI"