CSS Düğmeleri - Basmalı Düğme Kullanımı

Pushy Buttons kitaplığı, küçük bir CSS Basılabilir Düğmeler kitaplığıdır.

Bttn.css'yi yükleme

Pushy-buttons.min.css kitaplığını yüklemek için css'i github'dan indirin ve aşağıdaki satırı web sayfasının <head> bölümüne yapıştırın.

<head>
   <link rel = "stylesheet" href = "pushy-buttons.min.css">
</head>

Düğmenin Kullanılması

Html düğme etiketini kullanarak bir düğme oluşturun ve boyut belirleyicisi btn-lg ile btn, btn-blue stilleri ekleyin.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--blue">Submit</button>
   </body>
</html>

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

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 = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--lg btn--blue">Large</button>
      <button class = "btn btn--df btn--blue">Normal</button>
      <button class = "btn btn--md btn--blue">Medium</button>
      <button class = "btn btn--sm btn--blue">Small</button>
   </body>
</html>

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

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 = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--lg btn--red">Large</button>
      <button class = "btn btn--df btn--green">Normal</button>
      <button class = "btn btn--md btn--blue">Medium</button>
   </body>
</html>

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