Hover effektlari
Bu sahifa CSS tugma hover effektlari, soyalar, o‘chirilgan holatlar va kenglikni yoritadi.
CSS hover effektli tugmalar
CSS :hover psevdo-klassi tugma ustiga sichqoncha olib borilganda uning uslubini o‘zgartirish uchun ishlatiladi.
Maslahat: "hover" effekti tezligini belgilash uchun CSS transition-duration xossasidan foydalaning:
Misol
Hoverable buttons:
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
O‘zingiz sinab ko‘ring »
Soyali CSS tugmalar
CSS box-shadow xossasi tugmaga soya qo‘shish uchun ishlatiladi:
Misol
Soyali tugmalar:
.button1 {box-shadow:0 8px 16px 0 rgba(0,0,0,0.6)}
.button2:hover
{box-shadow:0 8px 16px 0 rgba(0,0,0,0.6)}
O‘zingiz sinab ko‘ring »
CSS nofaol tugmasi
CSS opacity xossasi tugmaga shaffoflik qo‘shish uchun ishlatilishi mumkin ("o‘chirilgan" ko‘rinish beradi).
Maslahat: cursor xossasiga "not-allowed" qiymatini ham qo‘shishingiz mumkin — tugma ustiga sichqoncha olib borilganda "to‘xtatish belgisi" ko‘rsatiladi:
Misol
Faol bo‘lmagan (disabled) tugma:
.disabledbtn {
opacity: 0.6;
cursor: not-allowed;
}
O‘zingiz sinab ko‘ring »
CSS tugma kengligi
Standart holda tugma o‘lchami uning matn kontenti bilan belgilanadi.
CSS width xossasi tugma uchun aniq kenglik belgilash uchun ishlatilishi mumkin.
Maslahat: Qat’iy kenglik uchun piksellardan, moslashuvchan kenglik uchun foizdan foydalaning (masalan, ota elementining 50%).
Misol
Har xil kenglikdagi tugmalar:
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width:
100%;}
O‘zingiz sinab ko‘ring »
Rasm ustidagi tugma
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!