Tlačítka pod nějakou informací určená k odkazování na externí zdroj informace.
Informace o zdroji Informace o zdroji Informace o zdroji Informace o zdroji<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>
Čtyři tlačítka ve skupině. Pouze ukázka stylu:
<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>