Nasıl Oluşturulur: Yatay Düğme Grubu

CSS ile yatay 'düğme grubu' nasıl oluşturulur öğrenin.

Yatay Düğme Grubu Nasıl Oluşturulur

Birinci Adım - HTML Ekle:

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

İkinci Adım - CSS Ekle:

.btn-group button {
  background-color: #04AA6D; /* Yeşil arkaplan */
  border: 1px solid green; /* Yeşil çerçeve */
  color: white; /* Beyaz metin */
  padding: 10px 24px; /* Bazı iç dolgular */
  cursor: pointer; /* Faret işareti/hand ikonu */
  width: 50%; /* Gerekirse genişlik ayarla */
  display: block; /* Düğmeleri katmanlı hale getir */
}
.btn-group button:not(:last-child) {
  border-bottom: none; /* Kenar çerçevesini önler */
}
/* Farekete farkedilince arkaplan rengi eklenir */
.btn-group button:hover {
  background-color: #3e8e41;
}

亲自试一试

相关页面

教程：CSS 按钮