Skupina tlačítek | kamery.marianuv-rozcestnik.cz

<h4 class="text-center text-2xl font-bold dark:text-white">Barevná tlačítka</h4>
<p class="mb-3 text-center text-gray-500 dark:text-gray-400">Tlačítka pod nějakou informací určená k odkazování na externí zdroj informace.</p>

<a href="#no" target="_blank"><span class="inline-flex items-center justify-center px-2 py-1 ms-2 text-xs font-medium text-green-800 bg-green-300 rounded hover:bg-green-800 hover:text-white">Informace o zdroji</span></a>

<a href="#no" target="_blank"><span class="inline-flex items-center justify-center px-2 py-1 ms-2 text-xs font-medium text-red-800 bg-red-300 rounded hover:bg-red-800 hover:text-white">Informace o zdroji</span></a>

<a href="#no" target="_blank"><span class="inline-flex items-center justify-center px-2 py-1 ms-2 text-xs font-medium text-yellow-800 bg-yellow-300 rounded hover:bg-yellow-500 hover:text-white">Informace o zdroji</span></a>

<a href="#no" target="_blank"><span class="inline-flex items-center justify-center px-2 py-1 ms-2 text-xs font-medium text-gray-400 bg-gray-800 rounded hover:bg-gray-700 hover:text-white">Informace o zdroji</span></a>

<style>
.btn-group button {
  background-color: #1F2937;
  border: 1px solid #374151;
  color: white;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 24px; 
  cursor: pointer; 
  float: left;
}

.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

.btn-group button:first-child{
  border-radius: 7px 0 0 7px;
}

.btn-group button:last-child{
  border-radius: 0 7px 7px 0;
}

.btn-group button:not(:last-child) {
  border-right: none; 
}

.btn-group button:hover {
  background-color: #374151;
}
</style>

<h3>Zarovnaná skupina tlačítek</h3>

<p>Čtyři tlačítka ve skupině. Pouze ukázka stylu:</p>
<div class="btn-group" style="width:100%">
  <button style="width: 15%">Apple</button>
  <button style="width: 15%">Samsung</button>
  <button style="width: 15%">Sony</button>
  <button style="width: 15%">HTC</button>
</div>