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 -