CSS دکمه
سیکس کسس استایل بٹن کا استعمال سیکھنے کا معلوم کریں
بٹن کی بنیادی انداز
مثال
.button {
background-color: #4CAF50; /* Green */
کیرنل: none;
color: white;
پدھر: 15px 32px;
نمایاندار-مقابل: وسط;
نمایاندار-تزئین: none;
نمایاندار: inline-block;
حجم-قلم: 16px;
}
رنگ بٹن
استعمال کریں: رزم-پس منظر صفت بٹن کی پس منظر رنگ بدلنا:
مثال
.بٹن1 {رزم-پس منظر: #4CAF50; /* سرسبز */}
.بٹن2 {رزم-پس منظر: #008CBA; /* نیلوی */}
.بٹن3 {رزم-پس منظر: #f44336; /* لال */}
.بٹن4 {رزم-پس منظر: #e7e7e7; رنگ: کالنا;} /* خاکستری */}
.بٹن5 {رزم-پس منظر: #555555; /* کالنا */}
بٹن کی انداز
استعمال کریں: حجم-قلم صفت بٹن کی قلم کی بڑائی بدلنا:
مثال
.بٹن1 {حجم-قلم: 10px;}
.بٹن2 {حجم-قلم: 12px;}
.بٹن3 {حجم-قلم: 16px;}
.بٹن4 {حجم-قلم: 20px;}
.بٹن5 {حجم-قلم: 24px;}
استعمال کریں: پدھر صفت بٹن کی داخلی پدھر بدلنا:
مثال
.بٹن1 {پدھر: 10px 24px;}
.بٹن2 {پدھر: 12px 28px;}
.بٹن3 {پدھر: 14px 40px;}
.بٹن4 {پدھر: 32px 16px;}
.بٹن5 {پدھر: 16px;}
چوکیدار بٹن
استعمال کریں: حلقة-نمای-کوچک صفت کا استعمال بٹن میں چوکیدار بنانے کے لئے:
مثال
.بٹن1 {حلقة-نمای-کوچک: 2px;}
.بٹن2 {حلقة-نمای-کوچک: 4px;}
.بٹن3 {حلقة-نمای-کوچک: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
رنگ دار حاشیہ والا بٹن
استعمال کریں: border خصوصیات کو استعمال کریں تاکہ بٹن کو رنگ دار حاشیہ فراہم کرنا:
مثال
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
شادی والا بٹن
جب موس بٹن کے اوپر آجائی تو استعمال کریں: :hover اس سلیکٹر کو استعمال کریں تاکہ بٹن کا انداز بدلنا:
نکاحاستعمال کریں: transition-duration خصوصیات کو استعمال کریں تاکہ 'شادی' کا انداز کی رفتار کو طے کرنا:
مثال
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
شادی بٹن
استعمال کریں: box-shadow خصوصیات کو استعمال کریں تاکہ بٹن پر شادی کا انداز پیداکرنا:
مثال
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
ممنوعہ بٹن
استعمال کریں: opacity بٹن کو شفافیت فراہم کرنے کی خصوصیات کو استعمال کریں (ممنوعہ اپریشن کا انداز پیداکرنا).
نکاحآپ 'not-allowed' کا قیمتی بھی شامل کرسکتے ہیں cursor خصوصیات، جب آپ بٹن پر موس کا نشان دینا آپریشن کرتے ہیں تو اس خصوصیات میں 'no parking sign' (ممنوعہ پارکنگ علامت) دکھائی دیتی ہے:
مثال
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
بٹن کی چوڑائی
مقصد سے، بٹن کی چوڑائی اس کے متن کی طوالت کے مطابق ہوتی ہے (تکمیل کی چوڑائی کے ساتھ). لطفاً استعمال کریں: width بٹن کی چوڑائی بدلنے کے لئے اپنائی جانے والی خصوصیات:
مثال
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
بٹن کا گروپ بندی
م边际 کو حذف کریں اور ہر بٹن کو کافی اضافہ کریں float:left، برای ایجاد گروه دکمهها:
مثال
.button {
float: left;
}
گروه دکمههای دارای حاشیه
استفاده border ویژگی برای ایجاد گروه دکمههای دارای حاشیه:
مثال
.button {
float: left;
border: 1px solid green;
}
گروه دکمه عمودی
استفاده display:block جایگزین float:left دکمهها را به صورت عمودی گروهبندی کنید، نه به صورت عمودی:
مثال
.button {
display: block;
}
دکمه انیمیشن
مثال 1
افزودن شاخه به هنگام قرارگیری ماوس:
مثال 2
افزودن اثر فشار به هنگام کلیک:
مثال 3
تاریکی هنگام قرارگیری ماوس:
مثال 4
افزودن اثر چکش به هنگام کلیک:
