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

Μάθετε πώς να δημιουργήσετε οριζόντια "κουμπί" χρησιμοποιώντας CSS.

Οριζόντια κουμπί

Συλλέξτε μια σειρά από κουμπιά σε ένα οριζόντιο κουμπί

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

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

Πρώτη Βήμα - Προσθήκη HTML:

<div class="btn-group">
  <button>Apple</button>
  <button>Samsung</button>
  <button>Sony</button>
</div>

Δεύτερη Βήμα - Προσθήκη CSS:

.btn-group button {
  background-color: #04AA6D; /* Κίτρινο υποβάθρου */
  border: 1px solid green; /* Κίτρινη θύρα */
  color: white; /* Λευκό κείμενο */
  padding: 10px 24px; /* Μερική διαδρομή */
  cursor: pointer; /* Σύμβολο ποντικιού/χειούς */
  width: 50%; /* Αν χρειάζεται, ρυθμίστε το πλάτος */
  display: block; /* Κάνει τα κουμπιά να παρατάσσονται */
}
.btn-group button:not(:last-child) {
  border-bottom: none; /* Αποτρέπει την διπλή κατώτερη στέπα */
}
/* Μουσικό κουτί παραμονής προσθέτει χρώμα υποβάθρου */
.btn-group button:hover {
  background-color: #3e8e41;
}

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

Σχετικές σελίδες

Εκμάθηση:Κουμπιά CSS