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 -