Nút biên giới css

. {Màu nền: #E7E7E7; Màu sắc: đen;} / * màu xám * /.button5 {màu nền: #555555;} / * đen * / /
  màu nền. màu trắng;
  màu. màu đen;
  đường viền. 2px cố định #4CAF50; .
}
...

Please tự mình thử »

Node color

Thuộc tính sử dụng

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
2 để thay đổi màu nền của nút

{Màu nền. #E7E7E7; . black;} /*color grey*/. nút5 {màu nền. #555555;} /* đen * // Sử dụng

Thuộc tính
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
8 để xác định tốc độ của hiệu ứng "hover"

Thí dụ

Kích thước nút
  thời lượng chuyển đổi. 0. 4s;
}

Thuộc tính sử dụng

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
3 to change the font size of the node.
  màu nền. #4CAF50; . trắng;
  color: white;
}
.

Please tự mình thử »

Node color

Thuộc tính sử dụng

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
2 để thay đổi màu nền của nút

Thí dụ

. {Màu nền: #E7E7E7; Màu sắc: đen;} / * màu xám * /.button5 {màu nền: #555555;} / * đen * / /
  bóng hộp. 0 8px 16px 0 rgba[0,0,0,0. 2], 0 6px 20px 0 rgba[0,0,0,0. 19];
}

Kích thước nút
  box-shadow. 0 12px 16px 0 rgba[0,0,0,0. 24], 0 17px 50px 0 rgba[0,0,0,0. 19];
}

Please tự mình thử »

Node color

Thuộc tính sử dụng

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
2 để thay đổi màu nền của nút

{Màu nền. #E7E7E7; . black;} /*color grey*/. nút5 {màu nền. #555555;} /* đen * // Bạn cũng có thể thêm

Thuộc tính
.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
}
1 có giá trị "không được phép", sẽ hiển thị "biển báo cấm đỗ xe" khi bạn di chuột qua nút

Kích thước nút

Thuộc tính sử dụng

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
3 để thay đổi kích thước phông chữ của nút

Thí dụ

.
. nút2 {chiều rộng. 50%;}
. nút3 {chiều rộng. 100%;}

Please tự mình thử »

Thuộc tính sử dụng * { box-sizing. hộp viền; . uốn cong; . trung tâm; . trung tâm; . tự động 50px; . nút { vị trí. tuyệt đối; . 50% } 4 to change the buffer of node


.

Các nút tròn


Thuộc tính sử dụng

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
5 để thêm các góc cạnh vào nút

}


Ranh giới nút màu

Thuộc tính sử dụng * { box-sizing. hộp viền; . uốn cong; . trung tâm; . trung tâm; . tự động 50px; . nút { vị trí. tuyệt đối; . 50% } 6 để thêm đường viền màu vào nút

Please tự mình thử »

Nút1 {  . màu trắng; . đen; . 2px mã hóa #4CAF50;



Trong bài viết này, bạn sẽ thấy cách tạo một kiểu nút bằng CSS

Mục tiêu của tôi ở đây chủ yếu là thể hiện cách các quy tắc và kiểu CSS khác nhau được áp dụng và sử dụng. Chúng tôi sẽ không thấy nhiều cảm hứng thiết kế và chúng tôi sẽ không thảo luận về ý tưởng tưởng tượng cho phong cách

Thay vào đó, đây sẽ là một cái nhìn tổng quan về cách các phong cách hoạt động, những thuộc tính nào thường được sử dụng và cách chúng có thể được kết hợp

Trước tiên, bạn sẽ xem cách tạo một nút trong HTML. Sau đó, bạn sẽ tìm hiểu cách ghi đè các kiểu nút mặc định. Cuối cùng, bạn sẽ có một cái nhìn thoáng qua về cách tạo kiểu cho ba trạng thái khác nhau của họ

lục mục

  1. Tạo một nút trong HTML
  2. Thay đổi kiểu dáng mặc định của các nút
    1. Thay đổi màu nền
    2. Change color text
    3. Thay đổi kiểu biên giới
    4. Change size
  3. Node status status
    1. Phong cách lơ lửng trạng thái
    2. Status style file
    3. Status style of active
  4. Kết luận

Started any

Cách tạo nút trong HTML

Để tạo một nút, hãy sử dụng phần tử

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
}
7

Đây là một tùy chọn dễ tiếp cận và ngôn ngữ có nghĩa hơn so với việc sử dụng một thùng chứa chung được tạo ra với phần tử

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
}
8

In file

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
}
9 bên dưới, tôi đã tạo cấu trúc cơ bản cho một trang web và thêm một nút duy nhất.
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
5

Please break line

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
60
  • Trước tiên, bạn thêm nút nút, bao gồm thẻ mở ____27 và đóng thẻ
    * {
        box-sizing: border-box;
    } 
    
    body {
        display:flex;
        justify-content: center;
        align-items: center;
        margin:50px auto;
    }
    
    .button {
        position: absolute;
        top:50%
    }
    
    62
  • Thuộc tính
    * {
        box-sizing: border-box;
    } 
    
    body {
        display:flex;
        justify-content: center;
        align-items: center;
        margin:50px auto;
    }
    
    .button {
        position: absolute;
        top:50%
    }
    
    63 trong thẻ
    .button {
        position: absolute;
        top:50%;
        background-color:#0a0a23;
    }
    
    7 open rõ ràng để tạo một nút có thể nhấp. Bởi vì nút cụ thể này không được sử dụng để gửi biểu mẫu, nên nó rất hữu ích cho các lý do ngôn ngữ nghĩa để bổ sung cho nó để làm cho mã rõ ràng hơn và không kích hoạt bất kỳ hành động nào không mong muốn.
  • Thuộc tính
    * {
        box-sizing: border-box;
    } 
    
    body {
        display:flex;
        justify-content: center;
        align-items: center;
        margin:50px auto;
    }
    
    .button {
        position: absolute;
        top:50%
    }
    
    65 sẽ được sử dụng để tạo kiểu nút trong tệp CSS riêng biệt. Giá trị
    * {
        box-sizing: border-box;
    } 
    
    body {
        display:flex;
        justify-content: center;
        align-items: center;
        margin:50px auto;
    }
    
    .button {
        position: absolute;
        top:50%
    }
    
    66 có thể là bất kỳ tên nào khác mà bạn chọn. Ví dụ. you could used
    * {
        box-sizing: border-box;
    } 
    
    body {
        display:flex;
        justify-content: center;
        align-items: center;
        margin:50px auto;
    }
    
    .button {
        position: absolute;
        top:50%
    }
    
    67
  • Văn bản
    * {
        box-sizing: border-box;
    } 
    
    body {
        display:flex;
        justify-content: center;
        align-items: center;
        margin:50px auto;
    }
    
    .button {
        position: absolute;
        top:50%
    }
    
    68 là văn bản có thể nhìn thấy bên trong nút

Bất kỳ kiểu nào sẽ được áp dụng cho các nút sẽ đi vào bên trong tệp

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
69

Bạn có thể áp dụng các kiểu cho nội dung HTML bằng cách liên kết hai tệp với nhau. You doing this thing with the tag

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
50 được sử dụng trong
.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
}
9

In file

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
69, tôi đã thêm một số kiểu dáng tệp trung vào nút ở giữa trình duyệt cửa sổ

Lưu ý rằng

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
65 được sử dụng với bộ lựa chọn
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
54. Đây là một cách để áp dụng các kiểu trực tiếp vào nút

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Mã từ trên sẽ dẫn đến các điều sau

Kiểu mặc định của các nút sẽ thay đổi tùy thuộc vào trình duyệt bạn đang sử dụng

Đây là một ví dụ về cách các Kiểu gốc cho các nút nhìn trên trình duyệt Google Chrome

Cách thay đổi kiểu dáng mặc định của các nút

Cách thay đổi màu nền của các nút

Để thay đổi màu nền của nút, hãy sử dụng thuộc tính CSS

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
2 và cung cấp cho nó một giá trị của một màu sắc của sở thích của bạn

In the selector

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
54, bạn sử dụng
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
57 để thay đổi màu nền của nút.
.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
}

Cách thay đổi màu văn bản của các nút

Màu mặc định của văn bản là màu đen, vì vậy khi bạn thêm màu nền tối, bạn sẽ nhận thấy rằng văn bản đã bị mất biến

Một điều khác để đảm bảo là có đủ độ tương phản giữa màu nền và màu văn bản của nút. Điều này giúp cho văn bản dễ đọc và dễ nhìn hơn

Tiếp theo, sử dụng thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
58 to change color of text.
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
6

Cách thay đổi kiểu biên giới của các nút

Chú ý màu xám xung quanh các cạnh của nút?

Một cách để giải quyết vấn đề này là sử dụng thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
59. You set value same as value of
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
2. Điều này đảm bảo các đường viền có cùng màu với nền của nút

Một cách khác là loại bỏ hoàn toàn đường viền bằng cách sử dụng

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
91.
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
5

Tiếp theo, bạn cũng có thể làm tròn các cạnh của nút bằng cách sử dụng thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
5, as so.
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
9

Bạn cũng có thể thêm hiệu ứng bóng tối nhẹ xung quanh nút bằng cách sử dụng thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
9.
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
4

Cách thay đổi kích thước của các nút

Cách để tạo thêm không gian bên trong ranh giới của nút được tăng

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
4 of node

Dưới đây tôi đã thêm giá trị 15px cho phần đệm trên, bên dưới, bên phải và bên trái của nút

Tôi cũng đặt chiều cao và chiều rộng tối thiểu, với các thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
95 và
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
96 tương ứng. Các nút cần phải đủ lớn cho tất cả các loại thiết bị khác nhau.
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
8

Cách tạo kiểu nút trạng thái

Các nút có ba trạng thái khác nhau

  • * {
        box-sizing: border-box;
    } 
    
    body {
        display:flex;
        justify-content: center;
        align-items: center;
        margin:50px auto;
    }
    
    .button {
        position: absolute;
        top:50%
    }
    
    7
  • * {
        box-sizing: border-box;
    } 
    
    body {
        display:flex;
        justify-content: center;
        align-items: center;
        margin:50px auto;
    }
    
    .button {
        position: absolute;
        top:50%
    }
    
    98
  • * {
        box-sizing: border-box;
    } 
    
    body {
        display:flex;
        justify-content: center;
        align-items: center;
        margin:50px auto;
    }
    
    .button {
        position: absolute;
        top:50%
    }
    
    99

Tốt nhất là ba tiểu bang được tạo kiểu khác nhau và không chia sẻ cùng một phong cách

Trong các phần sau, tôi sẽ đưa ra một lời giải thích ngắn gọn về ý nghĩa của từng tiểu bang và điều gì kích hoạt chúng. Bạn cũng sẽ thấy một số cách bạn có thể tạo kiểu nút cho từng trạng thái riêng biệt

Cách tạo kiểu * { box-sizing. hộp viền; . uốn cong; . trung tâm; . trung tâm; . tự động 50px; . nút { vị trí. tuyệt đối; . 50% } 7 status

Trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
7 có mặt khi người dùng di chuyển qua một nút, bằng cách đưa chuột hoặc bàn di chuột của họ qua nó, mà không cần chọn hoặc nhấp vào nó

Để thay đổi kiểu của nút khi bạn di chuột qua nó, hãy sử dụng bộ chọn Pseudoclass

____07 CSS.
bộ chọn lớp giả.

Một biến phổ biến thay đổi để thực hiện với

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
7 đang chuyển màu nền của nút

To make up the instead of change, please cặp

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
7 với thuộc tính
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
45

tài sản

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
45 sẽ giúp thực hiện chuyển đổi từ không có trạng thái sang trạng thái
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
7 mượt mà hơn nhiều

Việc thay đổi màu nền sẽ diễn ra chậm hơn một chút so với nó mà không có thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
45. Điều này cũng sẽ giúp làm cho kết quả cuối cùng ít gây nhẹ nhàng hơn cho người dùng.
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
0

Trong ví dụ trên, tôi đã sử dụng giá trị mã màu hex để làm cho màu nền trở thành màu sáng hơn khi tôi di chuột qua nút

Với sự trợ giúp của tài sản

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
45, tôi cũng đã gây ra sự chậm phát triển
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
80 khi quá trình chuyển đổi từ không có trạng thái sang trạng thái
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
7 xảy ra. Điều này gây ra sự chuyển đổi chậm hơn từ màu nền
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
82 gốc sang màu nền
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
83

Hãy nhớ rằng Pseudoclass

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
7 không hoạt động cho màn hình thiết bị di động và ứng dụng di động. Chỉ chọn sử dụng các hiệu ứng di chuột cho ứng dụng web máy tính để bàn và không chạm vào màn hình

Cách tạo kiểu. nút { vị trí. tuyệt đối; . 50%; . #0a0a23; . #ffff; . không ai; . 10px;

Trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
98 có hiệu lực cho người dùng bàn phím - cụ thể nó sẽ kích hoạt khi bạn tập trung vào một nút bằng cách nhấn phím
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
87 [
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
88]

Nếu bạn đang theo dõi, khi bạn tập trung vào nút sau khi nhấn phím

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
87, you will see like after

Chú ý đường viền màu xanh nhẹ nhàng xung quanh các nút khi nó tập trung?

Các trình duyệt có kiểu dáng mặc định cho

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
98 Pseudoclass, cho mục đích điều hướng bàn phím khả năng truy cập. Đó không phải là một ý tưởng tốt để loại bỏ hoàn toàn____001

Tuy nhiên, bạn có thể tạo các kiểu tùy chỉnh cho nó và làm cho nó dễ dàng phát hiện

Một cách để làm như vậy là bằng cách đặt màu phác thảo thành đầu tiên

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
02

Sau đó, bạn có thể duy trì

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
03 đến
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
04. Cuối cùng, sử dụng thuộc tính
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
9, bạn có thể thêm một màu yêu thích khi phần tử được tập trung vào.
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
7

Bạn cũng có thể ghép các kiểu này một lần nữa với các thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
45, tùy thuộc vào hiệu ứng bạn muốn đạt được.
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
0

Cách tạo kiểu cho trạng thái. nút { vị trí. tuyệt đối; . 50%; . #0a0a23; . #ffff; . không ai; . 10px;

Trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
99 được kích hoạt khi bạn nhấp vào nút bằng cách nhấp vào chuột của máy tính hoặc nhấp vào bàn di chuột của máy tính xách tay

Điều đó đang được nói, hãy nhìn vào những gì xảy ra khi tôi nhấp vào nút sau khi tôi áp dụng và giữ các kiểu cho các trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
7 và
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
98

Các loại trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
7 đã được áp dụng trước khi nhấp khi tôi di chuột qua nút

Các loại trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
98 cũng được áp dụng, bởi vì khi nhấp vào nút, nó cũng đạt được trạng thái
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
98 cùng với
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
99

Tuy nhiên, hãy nhớ rằng họ không giống nhau

Trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
98 là khi một phần tử đang được tập trung vào và
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
99 là khi người dùng
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
77 trên một phần tử bằng cách giữ và nhấn xuống nó

Để thay đổi kiểu khi người dùng nhấp vào nút, hãy áp dụng các kiểu cho

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
99 Bộ chọn giả CSS

Trong trường hợp này, tôi đã thay đổi màu nền của nút khi người dùng nhấp vào nó

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
1

Kết luận

And you have it rồi đấy. Bây giờ bạn đã biết những điều cơ bản về cách tạo kiểu một nút với CSS

Chúng tôi đã đi qua cách thay đổi màu nền và màu văn bản của các nút cũng như cách tạo kiểu cho các nút cho các trạng thái khác nhau của chúng

Để tìm hiểu thêm về thiết kế web, hãy xem chứng nhận thiết kế web đáp ứng của Freecodecamp. Trong các bài học tương tác, bạn sẽ học HTML và CSS bằng cách xây dựng 15 dự án thực thi và 5 dự án chứng thực

Lưu ý rằng chứng chỉ trên vẫn còn trong phiên bản beta - nếu bạn muốn phiên bản ổn định mới nhất, hãy kiểm tra tại đây

Cảm ơn bạn đã đọc và mã hóa hạnh phúc

Học mã miễn phí. Chương trình giảng dạy nguồn mở của Freecodecamp đã giúp hơn 40. 000 người được làm việc với tư cách là nhà phát triển. Start

Làm thế nào để tôi có thể tạo kiểu cho nút của mình trong CSS?

Làm thế nào để tạo kiểu nút với CSS. .

Tạo một nút. Lúc đầu, tạo một yếu tố

Type node of you. Vì vậy, đã đến lúc áp dụng các kiểu cho nút của bạn

Di chuột status status. Bước thứ ba của bạn là tạo kiểu trạng thái di chuột để cung cấp phản hồi trực quan cho người dùng khi trạng thái của nút thay đổi

Làm thế nào để bạn tùy chỉnh một nút trong CSS?

Điều chỉnh này có thể được thực hiện bằng cách điều hướng đến ngoại hình »Tùy chỉnh» bổ sung CSS. Sau đó, chỉ cần nhấp vào Lưu & Xuất bản, và bạn đã hoàn tất. điều hướng đến Giao diện » Tùy chỉnh » CSS bổ sung . Sau đó, chỉ cần nhấp vào Lưu & Xuất bản, và bạn đã hoàn tất.

Làm thế nào để bạn tạo một nút đẹp trong CSS?

Các nút CSS - Màu sắc của chúng ta có thể sử dụng thuộc tính màu CSS để thay đổi màu của văn bản bên trong nút. Để thay đổi màu nền của nút, chúng ta có thể sử dụng màu nền thuộc tính CSS. sử dụng thuộc tính CSS color để thay đổi màu của văn bản bên trong nút . Để thay đổi màu nền của button, chúng ta có thể sử dụng thuộc tính CSS background-color.

Bạn có thể tạo kiểu cho một nút trong HTML không?

Một thuộc tính kiểu trên thẻ gán một kiểu duy nhất cho nút. Giá trị của nó là CSS xác định sự xuất hiện của nút

Chủ Đề