Πώς να δημιουργήσετε: Κουμπί κειμένου

Πώς να ρυθμίσετε το στυλ του κουμπιού κειμένου

Πρώτη βήμα - Προσθήκη 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;
  δεικτής: δάκτυλο;
  διαδραστικότητα: στοιχείο;
}
/* Στην περίπτωση αλληλεπίδρασης του ποντικιού */
.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