tetapan butang css

Dalam reka bentuk web, butang ialah elemen interaktif yang biasa. CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk menerangkan gaya halaman web Melalui CSS, kita boleh menetapkan penampilan dan kesan interaktif butang. Dalam artikel ini, kami akan meneroka cara untuk menggayakan butang menggunakan CSS.

1. Tetapan gaya butang asas

Kita boleh menggunakan sifat CSS untuk menetapkan gaya butang. Berikut ialah contoh:

button {
  background-color: #4CAF50; /* 背景色 */
  border: none; /* 边框大小 */
  color: white; /* 文字颜色 */
  padding: 15px 32px; /* 内边距 */
  text-align: center; /* 文字居中 */
  text-decoration: none; /* 文字下划线 */
  display: inline-block; /* 显示方式 */
  font-size: 16px; /* 字体大小 */
  margin: 4px 2px; /* 外边距 */
  cursor: pointer; /* 鼠标指针样式 */
}

Kod ini menetapkan gaya butang asas, seperti berikut:

2. Tetapan lanjut gaya butang

Kami boleh menggunakan lebih banyak sifat CSS untuk menggayakan butang. Contohnya:

Kesan tuding

Apabila penuding tetikus melayang di atas butang, kita boleh menggunakan kelas pseudo :hover untuk menggayakan butang. Berikut ialah contoh:

button:hover {
  background-color: #3e8e41; /* 悬停时背景色 */
}

Kod ini akan menetapkan warna latar belakang butang kepada hijau, yang akan berkuat kuasa apabila penunjuk tetikus melayang di atas butang Hasilnya adalah seperti yang ditunjukkan di bawah:

Kesan aktif

Apabila butang diklik, kita boleh menggunakan kelas pseudo :active untuk menggayakan butang. Berikut ialah contoh:

button:active {
  background-color: #4CAF50; /* 点击时背景色 */
  box-shadow: 0 5px #666; /* 阴影效果 */
  transform: translateY(4px); /* 按钮向下移动 4 像素 */
}

Kod ini akan menetapkan warna latar belakang butang kepada hijau, dan menambah kesan bayang-bayang dan kesan animasi pergerakan ke bawah pada butang, yang akan berkuat kuasa apabila butang diklik. Hasilnya adalah seperti yang ditunjukkan di bawah Ditunjukkan:

Kesan dilumpuhkan

Apabila butang dilumpuhkan, kita boleh menggunakan :disabled pseudo-class untuk menetapkan gaya butang. Berikut ialah contoh:

button:disabled {
  opacity: 0.6; /* 降低按钮的透明度 */
  cursor: not-allowed; /* 禁止鼠标点击 */
}

Kod ini akan mengurangkan ketelusan butang dan melumpuhkan klik tetikus. Apabila butang dilumpuhkan, ia akan berkuat kuasa, dan hasilnya adalah seperti yang ditunjukkan di bawah:

Di atas ialah kaedah asas menetapkan gaya butang menggunakan CSS. Dengan menggunakan atribut dan kelas pseudo yang berbeza, kami boleh mencipta pelbagai gaya butang dan kesan interaksi untuk memenuhi pelbagai keperluan visual dan interaktif.

Atas ialah kandungan terperinci tetapan butang css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!