कैसे बनाएं: पाठ बटन

पाठ बटन के शैली को कैसे सेट करें

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

<button class="btn success">Success</button>
<button class="btn info">Info</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>
<button class="btn default">Default</button>

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

“टेक्स्ट बटन” की आपूर्ति के लिए, हमने मूलभूत पृष्ठभूमि-रंग और बॉर्डर हटा दिया:

.btn {
  बॉर्डर: नहीं;
  पृष्ठभूमि-रंग: इनहेरिट;
  पैडिंग: 14px 28px;
  फ़ॉण्ट-साइज: 16px;
  कर्सर: पॉइंटर;
  डिस्प्ले: इनलाइन-ब्लॉक;
}
/* On mouse-over */
.btn:hover {पृष्ठभूमि: #eee;}
.success {रंग: हरा;}
.info {रंग: डोडर ब्लू;}
.warning {रंग: नारंगी;}
.danger {रंग: नारंगी;}
.default {रंग: काला;}

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

अलग बैकग्राउंड रंग वाला टेक्स्ट बटन

माउस सस्ते पर विशेष पृष्ठभूमि-रंग वाला टेक्स्ट बटन:

.btn {
    बॉर्डर: नहीं;
    पृष्ठभूमि-रंग: इनहेरिट;
    पैडिंग: 14px 28px;
    फ़ॉण्ट-साइज: 16px;
    कर्सर: पॉइंटर;
    डिस्प्ले: इनलाइन-ब्लॉक;
}
/* हरा */
.success {
    रंग: हरा;
}
.success:hover {
    पृष्ठभूमि-रंग: #04AA6D;
    रंग: श्वेत;
}
/* नीला */
.info {
    रंग: डोडर ब्लू;
}
.info:hover {
    पृष्ठभूमि: #2196F3;
    रंग: श्वेत;
}
/* नारंगी */
.warning {
    रंग: नारंगी;
}
.warning:hover {
    पृष्ठभूमि: #ff9800;
    रंग: श्वेत;
}
/* नारंगी */
.danger {
    रंग: नारंगी;
}
.danger:hover {
    पृष्ठभूमि: #f44336;
    रंग: श्वेत;
}
/* ग्रे */
.default {
    रंग: काला;
}
.default:hover {
    background: #e7e7e7;
}

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

संबंधित पृष्ठ

तालीमःCSS बटन