कैसे करें - बटन डाउनलोड करें
CSS के साथ डाउनलोड बटन को स्टाइल करना सीखें।
ऑटो चौड़ाई:
पूर्ण चौड़ाई:
डाउनलोड बटन कैसे बनाएं
चरण 1) HTML जोड़ें:
एक आइकन लाइब्रेरी जोड़ें, जैसे कि फ़ॉन्ट कमाल, और HTML बटन में आइकन संलग्न करें:
उदाहरण
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Auto width -->
<button class="btn"><i class="fa fa-download"></i> Download</button>
<!-- Full width -->
<button class="btn"
style="width:100%"><i class="fa fa-download"></i> Download</button>
चरण 2) सीएसएस जोड़ें:
उदाहरण
/* Style buttons */
.btn {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 30px;
cursor: pointer;
font-size: 20px;
}
/* Darker background on mouse-over */
.btn:hover {
background-color: RoyalBlue;
}
युक्ति: आइकनों के बारे में अधिक जानने के लिए हमारे आइकन ट्यूटोरियल पर जाएं।
बटनों को स्टाइल करने के तरीके के बारे में अधिक जानने के लिए हमारे CSS बटन ट्यूटोरियल पर जाएँ।