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
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

<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

<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

<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
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

<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

<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.