Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

CSS tugmalar

ULASHISH

CSS tugmalarni uslublash

CSS yordamida har xil HTML tugmalarini ko‘p usullarda uslublash mumkin.

Tugmalarni uslublash uchun eng keng tarqalgan CSS xossalari:

  • background-color — tugma fon rangini belgilaydi
  • color — tugma matn rangini belgilaydi
  • border — tugma chegarasini belgilaydi
  • padding — tugma matni va chegarasi orasidagi bo‘shliqni belgilaydi
  • border-radius - tugmaga yumaloq burchaklar qo‘shadi
  • box-shadow - tugmaga soyalar qo‘shadi
  • text-align — tugma matnini markazlaydi
  • font-size — tugma matnining shrift o‘lchamini belgilaydi
  • text-decoration — tugma sifatida ishlatiladigan <a> elementlardagi taggi chiziqni olib tashlaydi
  • cursor — tugma ustiga sichqoncha olib borilganda kursor shaklini o‘zgartiradi

Tugmalar odatda HTML <button> elementi, <input type="button"> elementi yoki tugma ko‘rinishiga keltirilgan <a> elementi yordamida yaratiladi.

CSS asosiy tugma uslublari

Misol

Turli HTML elementlari uchun asosiy tugma uslublari:

.button {
  background-color: red;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}
O‘zingiz sinab ko‘ring »

CSS tugma ranglari

CSS background-color xossasi tugma fon rangini belgilash uchun ishlatiladi.

CSS color xossasi tugma matn rangini belgilash uchun ishlatiladi.

Misol

Har xil rangdagi tugmalar:

.button1 {background-color: #04AA6D;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
O‘zingiz sinab ko‘ring »

CSS tugma o‘lchamlari

CSS font-size xossasi tugma matnining shrift o‘lchamini belgilash uchun ishlatiladi:

Misol

Har xil shrift o‘lchamidagi tugmalar:

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
O‘zingiz sinab ko‘ring »

CSS padding xossasi tugma matni va chegarasi orasidagi bo‘shliqni belgilash uchun ishlatiladi:

Misol

Har xil padding‘li tugmalar:

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
O‘zingiz sinab ko‘ring »

CSS yumaloq burchakli tugmalar

CSS border-radius xossasi tugmaga yumaloq burchaklar qo‘shish uchun ishlatiladi:

Misol

Har xil yumaloq burchakli tugmalar:

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
O‘zingiz sinab ko‘ring »

CSS tugma chegaralari

CSS border xossasi tugma chegarasini belgilash uchun ishlatiladi:

Misol

Har xil chegarali tugmalar:

.button1 {border: 2px solid #04AA6D;}
.button2 {border: 2px dotted #008CBA;}
.button3 {border: 2px dashed #f44336;}
.button4 {border: 1px solid #e7e7e7;}
.button5 {border: 1px solid #555555;}
O‘zingiz sinab ko‘ring »

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish