CSS Düğmeleri - Hızlı Kılavuz

Bir web sayfasındaki düğme, bir kullanıcının gerekli girdileri seçtikten veya girdikten sonra tıkladığı ve gerekli bilgileri almak için ayrıntıları gönderdiği ana aktördür. Bu eğitici, düğmeleri harika hale getirmek için on ana CSS kitaplığına odaklanır, yani -

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

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

  • btns.css - btns.css düğmeler kitaplığı, yumuşak geçişlerden yararlanan bir CSS Düğmeleri kümesidir.

  • Social Buttons - Sosyal Düğmeler kitaplığı, saf CSS'de yapılmış bir dizi CSS Düğmesidir ve Bootstrap ve Font Awesome'e dayanır.

  • Beautons- Beautons düğmeler kitaplığı, düğmeler oluşturmak için basit bir CSS araç setidir. Çok sayıda tutarlı, sağlam ve sağlam düğme oluşturmak için stillerin, boyutların bir kombinasyonunun uygulanmasına izin verir.

bttn.css kitaplığı, düğmeler için büyük bir basit stil koleksiyonu sağlar. Bu kütüphane 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ımlamak

Aşağıda gösterildiği gibi, boyutunu CSS kullanarak 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 -

Bttn.css'de bulunan çeşitli stiller aşağıdadır

Sr. No. Tarzı Orta boy Ana renk Demo
1 bttn-slant bttn-md bttn-birincil
2 bttn-unite bttn-md bttn-birincil
3 bttn-hapı bttn-md bttn-birincil
4 bttn-float bttn-md bttn-birincil
5 bttn-malzeme-düz bttn-md bttn-birincil
6 bttn-malzeme-çemberi bttn-md bttn-birincil
7 bttn-fill-circle bttn-md bttn-birincil
8 bttn gradyanı bttn-md bttn-birincil
9 bttn-jöle bttn-md bttn-birincil
10 bttn-streç bttn-md bttn-birincil
11 bttn-minimal bttn-md bttn-birincil
12 bttn-bordered bttn-md bttn-birincil
13 bttn-basit bttn-md bttn-birincil

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'yi 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ı üretecektir -

Boyutu Tanımlamak

Aşağıda gösterildiği gibi, boyutunu CSS kullanarak 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ı ü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 = "/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ı üretecektir -

btns.css düğmeler kitaplığı, yumuşak geçişlerden yararlanan bir CSS Düğmeleri kümesidir.

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 = "btns.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/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-blue">Submit</button>
   </body>
</html>

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

Boyutu Tanımlamak

Aşağıda gösterildiği gibi, boyutunu CSS kullanarak 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/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-blue">Large</button>   
      <button class = "btn btn-sm btn-blue">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 = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-red">Red</button>   
      <button class = "btn btn-lg btn-blue">Blue</button>
      <button class = "btn btn-lg btn-green">Green</button>
      <button class = "btn btn-lg btn-sea">Sea</button>   
      <button class = "btn btn-lg btn-yellow">Yellow</button>
      <button class = "btn btn-lg btn-orange">Orange</button>  
      <button class = "btn btn-lg btn-purple">Purple</button>   
      <button class = "btn btn-lg btn-black">Black</button>
      <button class = "btn btn-lg btn-cloud">Cloud</button>
      <button class = "btn btn-lg btn-grey">Grey</button>
   </body>
</html>

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

Stili Tanımlamak

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

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-blue">Regular</button>   
      <button class = "btn btn-lg btn-blue btn-round">Round</button>
      <button class = "btn btn-lg btn-blue btn-raised">Raised</button>
      <button class = "btn btn-blue btn-sm">Small</button>   
      <button class = "btn btn-lg btn-outline-blue ">Outlined</button>
   </body>
</html>

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

Social Buttons kitaplığı, saf CSS'de yapılmış bir dizi CSS Düğmesidir ve Bootstrap ve Font Awesome'e dayanır.

Sosyal Düğmeleri Yükleme

Önyükleme-social.css kitaplığını yüklemek için, gelen önyükleme-social.css indirmek github ve <head> aşağıdaki satırı web sayfasının bölümüne yapıştırın.

<head>
   <link rel = "stylesheet" href = "bootstrap-social.css">
</head>

Düğmenin Kullanılması

Html bağlantı etiketini kullanarak bir düğme oluşturun ve btn-social sosyal tanımlayıcısı ile btn, btn-block stilleri ekleyin.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>

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

Twitter ile giriş yap

Boyutu Tanımlamak

Aşağıda gösterildiği gibi, boyutunu CSS kullanarak 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/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-lg btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-md btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-sm btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-xs btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>

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

Twitter ile giriş yap Twitter ile giriş yap Twitter ile giriş yap Twitter ile giriş yap

Yalnızca Simgeleri kullanma

Aşağıdaki örnek, yalnızca simge düğmelerinin nasıl seçileceğini gösterir.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-social-icon btn-twitter">
         <span class = "fa fa-twitter"></span>
      </a>   
   </body> 
</html>

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

Sosyal Düğmelerde bulunan çeşitli stiller aşağıdadır.

Sr.No. Tarzı Orta boy Buton Simge Düğmesi
1 btn-twitter btn-md Twitter ile giriş yap
2 btn-bitbucket btn-md Bitbucket ile giriş yapın
3 btn-dropbox btn-md Dropbox ile giriş yapın
4 btn-facebook btn-md Facebook ile giriş
5 btn-btn-flickr btn-md Flickr ile giriş yapın
6 btn-btn-foursquare btn-md Foursquare ile giriş yap
7 btn-btn-github btn-md Github ile giriş yap
8 btn-btn-google btn-md Google ile giriş yap
9 btn-btn-instagram btn-md Instagram ile giriş yap
10 btn-btn-linkedin btn-md Linkedln ile giriş yap
11 btn-btn-microsoft btn-md Microsoft ile giriş yapın
12 btn-btn-odnoklassniki btn-md Odnoklassniki ile giriş yapın
13 btn-btn-openid btn-md Openid ile giriş yap
14 btn-btn-pinterest btn-md Pinterest ile giriş yap
15 btn-btn-reddit btn-md Reddit ile giriş yapın
16 btn-btn-soundcloud btn-md Soundcloud ile giriş yapın
17 btn-btn-tumblr btn-md Tumblr ile giriş yap
18 btn-btn-twitter btn-md Twitter ile giriş yap
19 btn-btn-vimeo btn-md Vimeo ile giriş yap
20 btn-btn-vk btn-md Vk ile giriş yap
21 btn-btn-yahoo btn-md Yahoo ile giriş yap

Beautons düğmeler kitaplığı, düğmeler oluşturmak için basit bir CSS araç takımıdır. Çok sayıda tutarlı, sağlam ve sağlam düğme oluşturmak için stillerin, boyutların bir kombinasyonunun uygulanmasına izin verir.

Beauton'ları yükleme

Beautons kütüphane yüklemek için, gelen css indirmek github ve <head> aşağıdaki satırı web sayfasının bölümüne yapıştırın.

<head>
   <link rel = "stylesheet" href = "beauton.min.css">
</head>

Düğmenin Kullanılması

Html düğme etiketini kullanarak bir düğme oluşturun ve btn stilleri ekleyin.

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

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

Boyutu Tanımlamak

Aşağıda gösterildiği gibi, boyutunu CSS kullanarak 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/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--small">Small</button> <br/> <br/> 
      <button class = "btn btn--large btn-blue">Large</button><br/><br/>
      <button class = "btn btn--huge">Huge</button><br/><br/>
      <button class = "btn btn--full">Full</button><br/><br/>
   </body>
</html>

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









Yazı Tipi Boyutunu Tanımlama

Aşağıda gösterildiği gibi, boyutunu CSS kullanarak 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/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--alpha">Huge</button><br/><br/>
      <button class = "btn btn--beta">Large</button><br/><br/>
      <button class = "btn btn--gamma">Regular</button><br/><br/>
   </body>
</html>

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







İşlevsel Düğmeleri Tanımlama

Aşağıdaki örnek, çeşitli işlevsel düğmeleri göstermektedir.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--positive">Positive</button> <br/>  <br/>
      <button class = "btn btn--negative">Negative</button><br/><br/>
      <button class = "btn btn--inactive">Disabled</button><br/><br/>
      <button class = "btn btn--soft">Rounded</button><br/><br/>
      <button class = "btn btn--hard">Hard</button><br/><br/>
   </body>
</html>

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











Stilleri Birleştirmek

Aşağıdaki örnek, düğmelerin stillerinin nasıl birleştirileceğini gösterir.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--large btn--positive">Button</button>   <br/><br/>
      <button class = "btn btn--positive btn--alpha btn--small">Button</button><br/><br/>
      <button class = "btn btn--negative btn--full btn--soft">Button</button><br/><br/>
      <p>A <button class = "btn  btn--natural">button</button> in a paragraph.</p><br/><br/>
   </body>
</html>

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







Bir bir paragrafta.