Tugmalar guruhi
Bu sahifa CSS tugma guruhlari va animatsiyali tugmalarni yoritadi.
CSS gorizontal tugma guruhi
Tugmalar guruhini yaratish uchun tugmalarni <div> elementi ichiga olib, <div> elementiga display: flex; qo‘shamiz. Shuningdek, kichik ekranlarda tugmalar yangi qatorga o‘tishi uchun flex-wrap: wrap; qo‘shamiz:
Misol
.btn-group {
display: flex;
flex-wrap: wrap;
}
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration:
none;
font-size: 16px;
cursor: pointer;
}
.btn-group .button:hover {
background-color:
dodgerblue;
}
O‘zingiz sinab ko‘ring »
CSS chegarali tugma guruhi
Chegarali tugma guruhi yaratish uchun border xossasidan foydalaning:
Misol
.button {
border: 1px solid green;
}
.btn-group
.button:not(:last-child) {
border-right: none;
}
O‘zingiz sinab ko‘ring »
CSS vertikal tugma guruhi
Vertikal tugmalar guruhini yaratish uchun tugmalarni <div> elementi ichiga olib, <div> elementiga display: flex; qo‘shamiz. Shuningdek, tugmalar vertikal ko‘rinishda chiqishi uchun flex-direction: column; qo‘shamiz:
CSS animatsiyali tugmalar
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!