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

सीएसएस के साथ टेक्स्ट बटन कैसे स्टाइल करें?

<घंटा/>

CSS के साथ टेक्स्ट बटन को स्टाइल करने के लिए कोड निम्नलिखित है -

उदाहरण

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
button {
   border: none;
   color: white;
   font-weight: bolder;
   padding: 20px;
   font-size: 18px;
   cursor: pointer;
   border-radius: 6px;
}
.Success {
   color: #4caf50;
}
.Success:hover {
   background: #e7e7e7;
}
.Info {
   color: #2196f3;
}
.Info:hover {
   background: #e7e7e7;
}
.Warning {
   color: #ff9800;
}
.Warning:hover {
   background: #e7e7e7;
}
.Danger {
   color: #f44336;
}
.Danger:hover {
   background: #e7e7e7;
}
.Default {
   color: black;
}
.Default:hover {
   background: #e7e7e7;
}
</style>
</head>
<body>
<h1>Text Buttons Example</h1>
<button class="Success">Success</button>
<button class="Info">Info</button>
<button class="Warning">Warning</button>
<button class="Danger">Danger</button>
<button class="Default">Default</button>
</body>
</html>

आउटपुट

उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -

सीएसएस के साथ टेक्स्ट बटन कैसे स्टाइल करें?


  1. CSS के साथ लेबल कैसे स्टाइल करें? CSS के साथ लेबल कैसे स्टाइल करें?

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

  1. CSS के साथ ग्लोइंग टेक्स्ट कैसे बनाएं? CSS के साथ ग्लोइंग टेक्स्ट कैसे बनाएं?

    सीएसएस के साथ चमकदार टेक्स्ट बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    body {       background-color: rgb(0, 0, 0); &

  1. CSS के साथ हेडर कैसे स्टाइल करें? CSS के साथ हेडर कैसे स्टाइल करें?

    CSS का उपयोग करके हेडर को स्टाइल करने के लिए, कोड इस प्रकार है - उदाहरण पृष्ठ शीर्षक शरीर { फ़ॉन्ट-परिवार:सेगो यूआई, ताहोमा, जिनेवा, वर्दाना, सैन्स-सेरिफ़; मार्जिन:0; } .हेडर { पैडिंग:30पीएक्स; पाठ-संरेखण:केंद्र; पृष्ठभूमि:#bc1a6b; रंग सफेद; फ़ॉन्ट-आकार:30px; } मुख्य { पैडिंग:20px; फ़ॉन्ट-आकार:18px