कैसे करें - आइकन बटन
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">
<!-- Add font awesome icons to buttons -->
<p>Icon
buttons:</p>
<button class="btn"><i class="fa fa-home"></i></button>
<button class="btn"><i class="fa fa-bars"></i></button>
<button
class="btn"><i class="fa fa-trash"></i></button>
<button class="btn"><i
class="fa fa-close"></i></button>
<button class="btn"><i class="fa fa-folder"></i></button>
<p>Icon buttons with text:</p>
<button class="btn"><i
class="fa fa-home"></i> Home</button>
<button class="btn"><i class="fa fa-bars"></i>
Menu</button>
<button class="btn"><i class="fa fa-trash"></i>
Trash</button>
<button class="btn"><i class="fa fa-close"></i>
Close</button>
<button class="btn"><i class="fa fa-folder"></i>
Folder</button>
चरण 2) सीएसएस जोड़ें:
उदाहरण
/* Style buttons */
.btn {
background-color: DodgerBlue;
/* Blue background */
border: none; /* Remove borders */
color: white; /*
White text */
padding: 12px 16px; /* Some padding */
font-size: 16px; /* Set a font size */
cursor: pointer;
/* Mouse pointer on hover */
}
/* Darker background on mouse-over */
.btn:hover {
background-color:
RoyalBlue;
}
युक्ति: आइकनों के बारे में अधिक जानने के लिए हमारे आइकन ट्यूटोरियल पर जाएं।
बटनों को स्टाइल करने के तरीके के बारे में अधिक जानने के लिए हमारे CSS बटन ट्यूटोरियल पर जाएँ।