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

CSS के साथ एक बॉर्डर वाला बटन समूह बनाएं

<घंटा/>

आप बॉर्डर प्रॉपर्टी के साथ बॉर्डर वाला बटन समूह बनाने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं

उदाहरण

<!DOCTYPE html>
<html>
   <head>
      <style>
         .btn {
            color: black;
            background-color: yellow;
            width: 120px;
            text-align: center;
            font-size: 15px;
            padding: 20px;
            float: left;
            border: 3px solid blue;
         }
         .mybtn {
            background-color: orange;
         }
      </style>
   </head>
   <body>
      <h2>Result</h2>
      <p>Click below for result:</p>
      <div class = "mybtn">
         <button class = "btn">Result</button>
         <button class = "btn">Result</button>
         <button class = "btn">Result</button>
         <button class = "btn">Result</button>
         <button class = "btn">Result</button>
      </div>
   </body>
</html>

  1. CSS के साथ पिल बटन कैसे बनाएं? CSS के साथ पिल बटन कैसे बनाएं?

    पिल बटन बनाने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> button {    font-family: "Lucida Sans", "Lucida Sans Regular",

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

    CSS के साथ खोज बटन बनाने के लिए निम्नलिखित कोड है - उदाहरण body { फॉन्ट-फ़ैमिली:सेगो यूआई, ताहोमा, जिनेवा, वर्दाना, सैन्स-सेरिफ़;}* {बॉक्स-साइज़िंग:बॉर्डर-बॉक्स;}इनपुट [टाइप =टेक्स्ट] {पैडिंग:12px; फ़ॉन्ट-आकार:17px; सीमा:1px ठोस ग्रे; नाव छोड़ी; चौड़ाई:80%; बैकग्राउंड:#f1f1f1;}बटन {फ्लोट:लेफ्ट; चौड़

  1. सीएसएस के साथ टॉगल स्विच (चालू/बंद बटन) कैसे बनाएं? सीएसएस के साथ टॉगल स्विच (चालू/बंद बटन) कैसे बनाएं?

    CSS के साथ टॉगल स्विच बनाने के लिए, कोड इस प्रकार है - उदाहरण .switch { पोजीशन:रिलेटिव; प्रदर्शन:इनलाइन-ब्लॉक; चौड़ाई:60 पीएक्स; ऊंचाई:34 पीएक्स; } .स्विच इनपुट { अस्पष्टता:0; चौड़ाई:0; ऊंचाई:0; } अवधि { स्थिति:निरपेक्ष; कर्सर:सूचक; शीर्ष:0; बाएं:0; दाएं:0; नीचे:0; पृष्ठभूमि-रंग:#ccc; -वेबकिट-संक्र