CSS Düğmeleri - Beautons Kullanımı
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 bir stil, boyut kombinasyonu uygulamaya 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ı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/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 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/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.