कैसे बनाएं: सोशल मीडिया बटन

सोशल मीडिया बटन के शैली डिजाइन कैसे करें

पहला कदम - HTML जोड़ें:

<!-- चिह्न लाइब्रेरी जोड़ें -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Font Awesome चिह्न जोड़ें -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
...

दूसरा कदम - CSS जोड़ें:

चतुर्भुज उदाहरण

/* सभी Font Awesome चिह्नों के लिए स्टाइल सेट करें */
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}
/* ज़रूरत पड़े तो हॉवर इफेक्ट जोड़ें */
.fa:hover {
  opacity: 0.7;
}
/* प्रत्येक ब्रांड के लिए विशिष्ट रंग सेट करें */
/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}
/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
}

स्वयं प्रयोग करें

दीर्घवृत्ताकार बटन

हिफाजत:जोड़ें border-radius:50% एक वृत्ताकार बटन बनाने के लिए और बॉर्डर-रेडियस को कम करने के लिए चौड़ाई:

दीर्घवृत्ताकार उदाहरण

.fa {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

स्वयं प्रयोग करें

संबंधित बटन

शिक्षा:आयकॉन

शिक्षा:CSS बटन