CSS Κουμπιά

Μάθετε πώς να χρησιμοποιείτε το CSS για να ρυθμίσετε τα στυλ των κουμπιών.

Βασικό στυλ κουμπιού

Παράδειγμα

.button {
  background-color: #4CAF50; /* Green */
  περιθωριακή γραμμή: none;
  color: white;
  χώρος συμπύκτωσης: 15px 32px;
  καθορισμός κειμένου: κέντρο;
  απόκρυψη διαcoration;
  εμφάνιση: γραμμή στοιχείου;
  尺码: 16px;
}

Δοκιμάστε το προσωπικά

Χρώμα κειμένου

Use χρώμα υποβάθρου Αλλαγή του χρώματος υποβάθρου του κουμπιού:

Παράδειγμα

.button1 {χρώμα υποβάθρου: #4CAF50;} /* Χρυσό */
.button2 {χρώμα υποβάθρου: #008CBA;} /* Μπλε */
.button3 {χρώμα υποβάθρου: #f44336;} /* Κόκκινο */ 
.button4 {χρώμα υποβάθρου: #e7e7e7; χρώμα κειμένου: μαύρο;} /* Χακί */ 
.button5 {χρώμα υποβάθρου: #555555;} /* Μωβ */

Δοκιμάστε το προσωπικά

Μέγεθος κουμπιού

Use 尺码 Αλλαγή του μεγέθους γραμματοσειράς του κουμπιού:

Παράδειγμα

.button1 {尺码: 10px;}
.button2 {尺码: 12px;}
.button3 {尺码: 16px;}
.button4 {尺码: 20px;}
.button5 {尺码: 24px;}

Δοκιμάστε το προσωπικά

Use χώρος συμπύκτωσης Αλλαγή του εσωτερικού διαστήματος του κουμπιού:

Παράδειγμα

.button1 {χώρος συμπύκτωσης: 10px 24px;}
.button2 {χώρος συμπύκτωσης: 12px 28px;}
.button3 {χώρος συμπύκτωσης: 14px 40px;}
.button4 {χώρος συμπύκτωσης: 32px 16px;}
.button5 {χώρος συμπύκτωσης: 16px;}

Δοκιμάστε το προσωπικά

Κουμπιά με γωνία

Use περιθωριακή ακτίνα Επιλογή γωνίας γύρω από το κουμπί:

Παράδειγμα

.button1 {περιθωριακή ακτίνα: 2px;}
.button2 {περιθωριακή ακτίνα: 4px;}
.button3 {περιθωριακή ακτίνα: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

Δοκιμάστε το προσωπικά

Colored button border

Use border Add a colored border to the button with the property:

Παράδειγμα

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50; /* Green */
}
...

Δοκιμάστε το προσωπικά

Hoverable button


When the mouse moves over the button, use :hover The selector can change the style of the button.

Tip:Use transition-duration The property determines the speed of the 'hover' effect:

Παράδειγμα

.button {
  transition-duration: 0.4s;
}
.button:hover {
  background-color: #4CAF50; /* Green */
  color: white;
}
...

Δοκιμάστε το προσωπικά

Shadow button

Use box-shadow Add shadow to the button with the property:

Παράδειγμα

.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

Δοκιμάστε το προσωπικά

Disabled button

Use opacity Add transparency to the button with the property to create a 'disabled' appearance.

Tip:You can also add a tooltip with the value 'not-allowed': cursor Η ιδιότητα εμφανίζει το 'no parking sign' (σήμα απαγόρευσης στάθμευσης) όταν ο κουμπί είναι επιλεγμένος με το ποντίκι:

Παράδειγμα

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

Δοκιμάστε το προσωπικά

πλάτος κουμπιού


By default, the size of the button depends on its text content (the same width as the content). Use width Χρησιμοποιήστε τις ιδιότητες για να αλλάξετε το πλάτος των κουμπιών:

Παράδειγμα

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}

Δοκιμάστε το προσωπικά

Ομαδοποίηση κουμπιών

　

Διαγράφουμε το περιθώριο και προσθέτουμε διάσταση σε κάθε κουμπί float:leftγια τη δημιουργία ομάδας κουμπιών:

Παράδειγμα

.button {
  float: left;
}

Δοκιμάστε το προσωπικά

Κουμπιά με περιγράμματα

　

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

Παράδειγμα

.button {
  float: left;
  border: 1px solid green;
}

Δοκιμάστε το προσωπικά

Ομαδοποίηση Κουμπιών Ύψους

Χρήση display:block Αντικατάσταση float:left Ομαδοποίηση των κουμπιών κατά ύψος αντί για παράλληλα:

Παράδειγμα

.button {
  display: block;
}

Δοκιμάστε το προσωπικά

Κουμπιά σε Εικόνες

Καφέ

Δοκιμάστε το προσωπικά

Κουμπιά Αнимάσεων

Παράδειγμα 1

Προσθέστε το βέλος κατά την πτήση του ποντικιού:

Δοκιμάστε το προσωπικά

Προσθέστε το

Δοκιμάστε το προσωπικά

Παράδειγμα 3

Εμφάνιση κατά την πτήση του ποντικιού:

Δοκιμάστε το προσωπικά

Προσθέστε το

Δοκιμάστε το προσωπικά