"button inline 2 "
Bootstrap 3.3.0 Snippet by muhittinbudak

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="tr"> <head> <title>Bootstrap 3 - İki Buton Sağ/Sol</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif;"> <h3 class="text-center">Basit Sağ ve Sol Buton Düzeni</h3> <p class="text-center"><code>pull-left</code> ve <code>pull-right</code> sınıfları ile <code><a></code> etiketlerini kolayca hizalayabilirsiniz.</p>                   <!-- Bu div, float edilen (pull-left/right) elemanları içermek için clearfix kullanır --> <div class="button-container clearfix"> <!-- Sola Yaslanmış Buton --> <a href="#" class="koseli pull-left"> <span class="glyphicon glyphicon-arrow-left"></span> Önceki Sayfa </a> <!-- Sağa Yaslanmış Buton --> <a href="#" class="koseli pull-right"> Sonraki Sayfa <span class="glyphicon glyphicon-arrow-right"></span> </a> </div><!-- .button-container --> <!-- Bu div, float edilen (pull-left/right) elemanları içermek için clearfix kullanır --> <div class="button-container clearfix"> <!-- Sola Yaslanmış Buton --> <a href="#" class="koseli pull-left disabled"> <span class="glyphicon glyphicon-chevron-left"></span> Önceki Sayfa </a> <!-- Sağa Yaslanmış Buton --> <a href="#" class="koseli pull-right"> Sonraki Sayfa <span class="glyphicon glyphicon-chevron-right"></span> </a> </div><!-- .button-container --> </div> </body> </html>
.koseli { border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; background-color: #dc3545; /* Daha modern bir kırmızı tonu */ /* Görsel Eklemeler */ transition: background-color 0.2s, box-shadow 0.2s; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .koseli:hover { background-color: #c82333; /* Hover rengi */ text-decoration: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); color:#fff; } .button-container { /* pull-left/pull-right kullanan elemanların kapsayıcısını temizlemek için */ margin-top: 20px; padding: 10px; border: 1px dashed #ccc; /* Sınırları görmek için eklendi */ } .disabled { background-color: #6c757d; /* Gri (Devre dışı) renk */ box-shadow: none; cursor: not-allowed; color:#fff; } .disabled:hover { background-color: #6c757d; /* Gri (Devre dışı) renk */ box-shadow: none; cursor: not-allowed; color:#fff; }

Questions / Comments: