CSS Düğmeleri - bttn.css Kullanımı

bttn.css kitaplığı, düğmeler için büyük bir basit stil koleksiyonu sağlar. Bu kitaplık hem kişisel hem de ticari kullanım için tamamen ücretsizdir. Bu düğmeler kolayca özelleştirilebilir.

Bttn.css'yi yükleme

Btns.css kitaplığını yüklemek için, btns.css bağlantısına gidin ve aşağıdaki satırı web sayfasının <head> bölümüne yapıştırın.

<head>
   <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>

Düğmenin Kullanılması

Html düğme etiketini kullanarak bir düğme oluşturun ve boyut belirleyici bttn-lg ile bttn-slant, bttn-royal stilleri ekleyin.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-slant">Submit</button>
   </body>
</html>

Aşağıdaki çıktıyı üretecektir -

Boyutu Tanımlama

Aşağıda gösterildiği gibi CSS kullanarak boyutunu tanımlayarak ve sınıf adıyla birlikte kullanarak bir düğmenin boyutunu artırabilir veya azaltabilirsiniz. Verilen örnekte, dört boyutu değiştirdik.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-pill bttn-lg">Large</button>
      <button class = "bttn-pill bttn-md">Medium</button>
      <button class = "bttn-pill bttn-sm">Small</button>
      <button class = "bttn-pill bttn-xs">Extra Small</button>
   </body>
</html>

Aşağıdaki çıktıyı üretecektir -

Rengi Tanımlamak

Tıpkı boyut gibi, CSS kullanarak düğmenin rengini tanımlayabilirsiniz. Aşağıdaki örnek, düğmenin renginin nasıl değiştirileceğini gösterir.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-pill bttn-lg bttn-primary">Primary</button>
      <button class = "bttn-pill bttn-md bttn-warning">Warning</button>
      <button class = "bttn-pill bttn-sm bttn-danger">Danger</button>
      <button class = "bttn-pill bttn-xs bttn-success">Success</button>
      <button class = "bttn-pill bttn-xs bttn-royal">Royal</button>
   </body>
</html>

Aşağıdaki çıktıyı üretecektir -