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

CSS के साथ एक गोल सक्रिय और होवर बटन सेट करें

<घंटा/>

: का उपयोग करें होवर करें होवर प्रभाव जोड़ने के लिए चयनकर्ता। एक गोलाकार प्रभाव देने के लिए, सीमा-त्रिज्या . का उपयोग करें संपत्ति। आप CSS के साथ राउंडेड एक्टिव और होवर बटन सेट करने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं:

उदाहरण

<!DOCTYPE html>
<html>
   <head>
      <style>
         .demo {
            display: inline-block;
         }
         .demo a {
            color: red;
            padding: 5px 12px;
            text-decoration: none;
            border-radius: 5px;
         }
         .demo a.active {
            background-color: orange;
            color: white;
            border-radius: 5px;
         }
         .demo a:hover:not(.active) {
            background-color: yellow;
         }
      </style>
   </head>
   <body>
      <h2>Our Quizzes</h2>
      <div class = "demo">
         <a href = "prev.html"><</a>
         <a href = "quiz1.html">Quiz1</a>
         <a href = "quiz2.html">Quiz2</a>
         <a href = "quiz3.html">Quiz3</a>
         <a href = "quiz4.html" class = "active">Quiz4</a>
         <a href = "next.html">></a>
      </div>
   </body>
</html>

  1. कैसे सीएसएस के साथ लुप्त होती बटन बनाने के लिए?

    CSS के साथ फ़ेडिंग बटन बनाने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> button {    background-color: rgb(255, 175, 222);    border:

  1. HTML और CSS के साथ साइनअप फॉर्म कैसे बनाएं?

    HTML और CSS का उपयोग करके साइनअप फ़ॉर्म बनाने के लिए निम्नलिखित कोड है - उदाहरण <!DOCTYPE html> <html> <head> <style> body{    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } * {box-sizing: border-box} input[type=text], input[type=password] {

  1. सीएसएस के साथ लंबवत और क्षैतिज रूप से बटन तत्व को कैसे केंद्रित करें?

    CSS के साथ एक बटन को लंबवत और क्षैतिज रूप से केन्द्रित करने के लिए, कोड इस प्रकार है - उदाहरण body { font-family:Segoe UI, Tahoma, Geneva, Verdana, sans-serif; } .केंद्रित {प्रदर्शन:फ्लेक्स; औचित्य-सामग्री:केंद्र; संरेखित-आइटम:केंद्र; ऊंचाई:200px; सीमा:3px ठोस आरजीबी (0, 70, 128); } बटन {फ़ॉन्ट-आका