कैसे करें - सोशल मीडिया बटन
CSS के साथ सोशल मीडिया बटन को स्टाइल करना सीखें।
सोशल मीडिया बटन को कैसे स्टाइल करें
चरण 1) 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 -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
...
चरण 2) सीएसएस जोड़ें:
वर्ग उदाहरण
/* Style all font awesome icons */
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
}
/* Add a hover effect if you want */
.fa:hover {
opacity: 0.7;
}
/* Set a specific color for each brand */
/* Facebook */
.fa-facebook
{
background: #3B5998;
color:
white;
}
/* Twitter */
.fa-twitter {
background:
#55ACEE;
color: white;
}
गोल बटन
युक्ति: गोल बटन बनाने के लिए जोड़ें border-radius:50%
, और कम करें width
:
गोल उदाहरण
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
युक्ति: आइकनों के बारे में अधिक जानने के लिए हमारे आइकन ट्यूटोरियल पर जाएं।
बटनों को स्टाइल करने के तरीके के बारे में अधिक जानने के लिए हमारे CSS बटन ट्यूटोरियल पर जाएँ।