Cách tạo hoạt ảnh nút css. Làm nút thời trang

Vlad Merzhevich

Các nút tiêu chuẩn được tạo thông qua thẻ

Nó trông khá đẹp (Hình 3), nhưng cũng có những điểm khác biệt rõ ràng so với nút ban đầu - nó trông phẳng, giống như một tấm bảng.

Cơm. 3. Chế độ xem nút có độ dốc

Bạn có thể lại tạo một nút có hình dạng mong muốn bằng cách sử dụng gradient, “chơi” với màu sắc. Hai giá trị gradient không còn đủ nữa; may mắn thay, Firefox và Safari đã đưa ra giải pháp.

nền: -moz-tuyến tính-gradient(#D0ECF4, #5BC9E1, #D0ECF4);

Thay vì hai giá trị, hãy chèn số lượng màu mong muốn, độ dốc sẽ chuyển đổi mượt mà từ màu này sang màu khác.

Chrome, Safari

nền: -webkit-gradient(tuyến tính, 0 0, 0 100%, từ(#D0ECF4), đến(#D0ECF4), color-stop(0.5, #5BC9E1));

Tham số color-stop chỉ định điểm mà màu mới sẽ được áp dụng. Giá trị nằm trong khoảng từ 0 đến 1.

Ví dụ 2: Các nút có độ chuyển màu nâng cao

HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx

nút

Kết quả của ví dụ được hiển thị trong Hình. 4.

Cơm. 4. Độ dốc, cần loại độ dốc nào

Tương tự, bạn có thể tạo bất kỳ độ chuyển màu nào khác trên một nút hoặc thành phần khác (Hình 5). Nhưng hãy tự mình làm việc này, đó là lý do tại sao tôi đã thêm nó vào hội thảo.

Cơm. 5. Các nút khác nhau như vậy

Hãy để tôi tóm tắt. Bạn có thể tạo một nút có độ dốc và các góc tròn mà không cần hình ảnh. Tuy nhiên, có sự nhầm lẫn và bỏ trống với các trình duyệt. Opera hoàn toàn không thể hoạt động với độ dốc, trong IE 9 có một lỗi khó chịu khi kết hợp độ dốc với các góc (Hình 6).

Cơm. 6. Lớp phủ nền ở các góc trong IE 9

Chà, bây giờ chúng tôi sẽ tạo ra những “vẻ đẹp” cho trình duyệt Firefox, Safari và Chrome.

Trước khi xem xét các nút, chúng ta hãy xem các cài đặt chung cho tất cả chúng.

HTML

Các nút sẽ sử dụng mã HTML rất đơn giản:

Đặt mua

CSS

Ngoài ra, tất cả các nút sẽ có cài đặt chung cho văn bản chú thích và bỏ chọn liên kết:

ButtonText ( phông chữ: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; ) a ( color: #fff; text-trang trí: none; )

Thông thường, người dùng mong đợi một hiệu ứng khá nhẹ nhàng khi di chuột qua một liên kết hoặc nút. Và trong trường hợp của chúng tôi, nút thay đổi kích thước - nó tăng lên, hiển thị một thông báo bổ sung.

Mã CSS cơ bản

Để bắt đầu, chúng ta chỉ cần tạo hình dạng và màu sắc cho nút. Xác định chiều cao 28px và chiều rộng 115px, thêm lề và phần đệm, đồng thời tạo cho nút một đường viền nhẹ.

#button1 ( nền: #6292c2; đường viền: 2px Solid #eee; chiều cao: 28px; chiều rộng: 115px; lề: 50px 0 0 50px; phần đệm: 0 0 0 7px; tràn: ẩn; hiển thị: khối; )

Hiệu ứng CSS3

Một số người thích khi một nút bấm đơn giản lại đi kèm với khá nhiều mã CSS. Phần này cung cấp các kiểu CSS3 bổ sung cho nút của chúng tôi. Bạn có thể làm mà không cần chúng, nhưng chúng mang lại cho nút một cái nhìn hiện đại hơn.

Làm tròn các góc của khung và thêm độ dốc. Điều này sử dụng một thủ thuật nhỏ với độ dốc tối tương tác với bất kỳ màu nền nào.

/*Các góc được làm tròn*/ -webkit-border-radius: 15px; -moz-biên giới-bán kính: 15px; bán kính đường viền: 15px; /*Gradient*/ hình nền: -webkit-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -moz-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -o-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -ms-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: gradient tuyến tính(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

Hoạt ảnh CSS

Bây giờ hãy thiết lập quá trình chuyển đổi CSS. Hoạt ảnh sẽ được sử dụng cho bất kỳ thay đổi thuộc tính nào và sẽ kéo dài nửa giây.

Di chuột lên trên

Tất cả những gì còn lại là thêm kiểu để mở rộng nút khi bạn di chuột qua nó. Nút phải rộng 230px để hiển thị toàn bộ thông báo.

#button1:di chuột ( chiều rộng: 230px; )

Thay đổi tông màu đơn giản

Một hiệu ứng CSS rất đơn giản và phổ biến cho một nút. Khi bạn di con trỏ chuột, tông màu nền sẽ thay đổi mượt mà.

Mã CSS cơ bản

Mã CSS rất giống với ví dụ trước. Màu nền khác được sử dụng và hình dạng có chút thay đổi. Nó cũng căn giữa văn bản và đặt chiều cao dòng cho nút sao cho việc căn giữa theo chiều dọc xảy ra.

#button2 ( nền: #d11717; đường viền: 2px Solid #eee; chiều cao: 38px; chiều rộng: 125px; lề: 50px 0 0 50px; tràn: ẩn; hiển thị: khối; căn chỉnh văn bản: giữa; chiều cao dòng: 38px; )

Hiệu ứng CSS3

Đặt độ tròn của các góc, độ dốc cho nền và bóng bổ sung. Sử dụng rgba chúng ta làm cho bóng có màu đen và trong suốt.

/*Các góc được làm tròn*/ -webkit-border-radius: 10px; -moz-biên giới-bán kính: 10px; bán kính đường viền: 10px; /*Gradient*/ hình nền: -webkit-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -moz-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -o-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -ms-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: gradient tuyến tính(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2); bóng hộp: 0px 3px 1px rgba(0, 0, 0, 0.2);

Hoạt ảnh CSS

Hoạt ảnh thực tế không khác gì ví dụ trước.

/*Transition*/ -webkit-transition: Tất cả đều dễ dàng 0,5 giây; -moz-transition: Tất cả 0,5 giây đều dễ dàng; -o-transition: Tất cả 0,5 giây đều dễ dàng; -ms-transition: Tất cả đều dễ dàng 0,5 giây; chuyển tiếp: Tất cả đều dễ dàng 0,5 giây;

Di chuột lên trên

Khi di con trỏ chuột, màu nền khác sẽ được đặt. Hãy thử chọn tùy chọn màu nhạt hơn trong Photoshop để có hiệu ứng tuyệt vời.

#button2:hover ( màu nền: #ff3434; )

Hiệu ứng này có thể khá ấn tượng tùy thuộc vào việc lựa chọn hình nền. Bản demo sử dụng nền không có đặc điểm và hiệu ứng trông không có gì đặc biệt. Hãy thử sử dụng một hình ảnh khác và hiệu ứng có thể rất ấn tượng.

Mã CSS cơ bản

Phần chính của mã giống như các ví dụ trước. Xin lưu ý rằng chúng tôi đang sử dụng hình nền. Vị trí nền ban đầu được đặt thành "0 0". Khi bạn di con trỏ, vị trí sẽ dịch chuyển theo chiều dọc.

#button3 ( nền: #d11717 url("bkg-1.jpg"); vị trí nền: 0 0; bóng văn bản: 0px 2px 0px rgba(0, 0, 0, 0.3); cỡ chữ: 22px; chiều cao : 58px; chiều rộng: 155px; lề: 50px 0 0 50px; tràn: ẩn; hiển thị: khối; căn chỉnh văn bản: giữa; chiều cao dòng: 58px; )

Hiệu ứng CSS3

Không có gì đặc biệt trong ví dụ này - các góc và bóng được làm tròn.

/*Các góc được làm tròn*/ -webkit-border-radius: 5px; -moz-biên giới-bán kính: 5px; bán kính đường viền: 5px; /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2); bóng hộp: 0px 3px 1px rgba(0, 0, 0, 0.2);

Hoạt ảnh CSS

Hoạt ảnh trong trường hợp này kéo dài lâu hơn để tạo hiệu ứng mượt mà và thú vị.

/*Transition*/ -webkit-transition: Tất cả đều dễ dàng trong 0,8 giây; -moz-transition: Tất cả 0,8 giây đều dễ dàng; -o-transition: Tất cả 0,8 giây đều dễ dàng; -ms-transition: Tất cả 0,8 giây đều dễ dàng; chuyển tiếp: Tất cả đều dễ dàng 0,8 giây;

Di chuột lên trên

Bây giờ là lúc di chuyển hình nền. Vị trí bắt đầu là "0 0". Đặt tham số thứ hai thành 150px. Để dịch chuyển theo chiều ngang, bạn cần thay đổi tham số đầu tiên.

#button3:hover ( vị trí nền: 0px 150px; )

Mô phỏng nhấn nút 3D

Ví dụ cuối cùng trong bài học của chúng ta là về phương pháp 3D phổ biến để mô phỏng thao tác nhấn nút khi di con trỏ chuột lên trên nó. Hoạt ảnh trong trường hợp này đơn giản đến mức nó thậm chí không yêu cầu chuyển đổi CSS. Nhưng kết quả cuối cùng khá ấn tượng.

Mã CSS cơ bản

Mã CSS cho nút của chúng tôi.

#button4 ( nền: #5c5c5c; bóng văn bản: 0px 2px 0px rgba(0, 0, 0, 0.3); cỡ chữ: 22px; chiều cao: 58px; chiều rộng: 155px; lề: 50px 0 0 50px; tràn: ẩn ; hiển thị: khối; căn chỉnh văn bản: giữa; chiều cao dòng: 58px; )

Hiệu ứng CSS3

Trong trường hợp này, CSS3 không còn là một lựa chọn tốt nữa. Để đạt được hiệu ứng, cần có bóng và độ dốc. Bóng sắc nét tạo ra hình dáng của một nút 3D.

/*Các góc được làm tròn*/ -webkit-border-radius: 5px; -moz-biên giới-bán kính: 5px; bán kính đường viền: 5px; /*Shadow*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); bóng hộp: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ hình nền: -webkit-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -moz-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -o-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -ms-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: gradient tuyến tính(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

Di chuột lên trên

Trong trường hợp này chúng ta có phần di chuột lớn nhất. Độ dài của bóng được giảm xuống và các lề được sử dụng để tạo ra sự hòa trộn giữa vùng tối. Tất cả cùng nhau tạo ra ảo giác như đang nhấn một nút. Lật gradient sẽ tăng cường hiệu ứng.

#button4:hover ( lề-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0.8); bóng hộp: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ hình nền: -webkit-tuyến tính-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); hình nền: -moz-tuyến tính-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4 )); hình nền: -o-tuyến tính-gradient(dưới cùng, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); hình nền: -ms-tuyến tính-gradient( dưới cùng, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); hình nền: gradient-tuyến tính(dưới cùng, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); )

Xin chào tất cả mọi người đang đọc ấn phẩm này! Trong bài viết hôm nay, tôi sẽ trả lời một trong những câu hỏi thường gặp nhất: “Nút 3D được tạo bằng công cụ CSS như thế nào?” Chủ đề này không dễ, vì vậy tôi khuyên bạn nên nghiên cứu kỹ tài liệu lý thuyết và thực tiễn được cung cấp dưới đây.

Sau khi đọc bài viết, bạn sẽ không chỉ tìm hiểu những thẻ và thuộc tính nào của ngôn ngữ web nên được sử dụng để tạo nút trên một trang trực tuyến mà còn đi sâu vào các phần sâu hơn của CSS. Ý tôi là các lớp giả và các hiệu ứng động khác nhau. Ngoài ra, bạn có thể tự tạo các chương trình của riêng mình, dựa trên các ví dụ của tôi. Vậy hãy bắt đầu!

Công cụ tạo nút cơ bản

Có hai thẻ trong ngôn ngữ đánh dấu có thể được sử dụng để tạo nút trên trang web. Cái này < nút> và quen thuộc với bạn < đầu vào>.

Những người đăng ký của tôi đã đọc các ấn phẩm trước đây cũng như những người đã làm việc một chút với phần tử này < đầu vào>, họ biết rằng công cụ này cho phép bạn tạo không chỉ các nút mà còn cả các đối tượng tùy chỉnh khác. Ví dụ: trường văn bản, danh sách, nút radio, v.v. Tất cả điều này xảy ra nhờ thuộc tính kiểu.

Thẻ thứ hai là < nút>. Về cơ bản nó hoạt động giống như phần tử được mô tả ở trên. Giống < đầu vào>, < nút> nên được đặt bên trong container < biểu mẫu>. Nút được tạo không có trong nút này sẽ được hiển thị chính xác nhưng sẽ không truyền thông tin đến máy chủ.

Tuy nhiên, thẻ này có một số khác biệt. Vì thế, < nút> cung cấp cho nhà phát triển nhiều tùy chọn hơn để định dạng và tạo kiểu cho các nút mà họ tạo.

Để rõ ràng, bên dưới tôi đã đính kèm một ví dụ về việc triển khai phần mềm các thành phần được mô tả:

ví dụ 1

Những “lớp giả” này là gì?

Khi chạy ví dụ đầu tiên, các nút màu hồng hoàn toàn giống hệt nhau được hiển thị trong cửa sổ với điểm khác biệt duy nhất là một từ. Giai đoạn đầu tiên và quan trọng đã được hoàn thành. Bạn đã học cách chèn các nút trên các trang của trang web.

Tuy nhiên, bạn phải thừa nhận rằng ở dạng này chúng không thú vị và quá tầm thường. Đó là lý do tại sao chúng ta sẽ bắt đầu thành thạo các lớp giả.

Lớp giả chịu trách nhiệm về hành vi động của các đối tượng được xác định trên tài nguyên web. Tôi nghĩ mỗi người trong số các bạn đều nhận thấy khi bạn di con trỏ qua một liên kết hoặc một trường nào đó, chúng sẽ thay đổi như thế nào. Vì vậy, đây là hành động của các lớp giả.

Để xác định loại hành vi này, hãy sử dụng “:” theo sau là tên trạng thái của đối tượng.

Hãy chú ý đến hình thức chung của quảng cáo:

Bộ chọn (tức là phần tử): pseudo-class (xác định các đặc điểm kiểu)

Cơ chế được mô tả có thể được áp dụng:

đến định danh tiêu chuẩn: một: di chuột( bóng văn bản: 0 -1px 9px màu xanh;);
tới bộ chọn bạn đã khởi tạo: #aa:tập trung(màu sắc: xanh;).

Tất cả các lớp giả hiện có được chia thành 3 nhóm, mỗi nhóm chịu trách nhiệm:

trạng thái của đối tượng (đã truy cập, di chuột, liên kết, tiêu điểm, hoạt động);
phần tử con (con đầu lòng);
ngôn ngữ của nội dung văn bản (lang).

Vì ấn phẩm liên quan đến các nút động thể tích nên tôi sẽ nói về một số thành phần của nhóm chịu trách nhiệm về trạng thái của các đối tượng.

Ví dụ về các nút bất thường

Tôi đã nói với bạn mọi thứ bạn cần về mặt lý thuyết, và bây giờ chúng ta hãy bắt tay vào thực hành. Tôi muốn hiển thị 2 giải pháp thú vị để trình bày các nút.

Chương trình này tạo một nút hoạt hình ba chiều, khi bạn nhấp vào nút đó, nút sau sẽ được “nhấn” do thuộc tính biến đổi.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

Ví dụ 2

Tôi muốn lưu ý rằng < nút> cũng hỗ trợ hiển thị hình ảnh. Vì vậy, tôi đã viết ví dụ sau dựa trên ví dụ trước, bổ sung thêm một số điểm.

Khai báo nút đã được thay đổi thành chuỗi ;
Phần sau đây đã được thêm vào đánh dấu kiểu:
1 2 3 4 5 6 7 8 9 img ( display: block; chiều rộng: 200px; chiều cao: 70px; float: trái; ) p ( đệm-top:10px; );
img ( display: block; chiều rộng: 200px; chiều cao: 70px; float: trái; ) p ( đệm-top:10px; );

Xin chào các bạn thân mến. Hôm nay tôi sẽ cho bạn biết về hai cách giúp bạn tạo nút động cho trang web của mình. Có thể bạn đã nhìn thấy rất nhiều nút này và nhấp vào chúng. Vì vậy, trên blog của mình, tôi định kỳ giới thiệu các khóa học và đào tạo liên kết, chỉ những khóa học mà bản thân tôi đã thử. Và tất nhiên tôi quan tâm đến số liệu thống kê, và số liệu thống kê nói rằng mọi người nhấp vào các nút hấp dẫn thường xuyên hơn 48% so với các liên kết thông thường.

Nguyên tắc tạo các nút hoạt hình bằng CSS như sau; có ba điều khoản. 1 - Ban đầu, 2 - khi di con trỏ và 3 - khi nhấn nút chuột. Một số dịch vụ có cả ba điều khoản, trong khi những dịch vụ khác chỉ có hai điều khoản. Nhưng điều chính là bạn hài lòng với kết quả cuối cùng.

Video hướng dẫn cách tạo nút động thứ 2:

Ví dụ: hãy xem dịch vụ CSS3 ButtonGenerator; nó chỉ có hai điều khoản. Nhưng hiệu ứng trông rất tốt. Ai đang bối rối vì thiếu tiếng Nga, hãy sử dụng trình tạo cuối cùng được đưa ra trong danh sách.

Vì vậy hãy bắt đầu.

Mở trang chính của dịch vụ. Ban đầu, bạn sẽ thấy chế độ xem sơ bộ của nút và các công cụ cho phép bạn thực hiện tất cả các loại cài đặt.

Phần đầu tiên, Text&Font, chịu trách nhiệm về văn bản, cỡ chữ, màu chữ, bóng chữ. Đây là nơi bạn viết nhãn trên nút, đặt kích thước, màu sắc và bóng của nó.

Phần tiếp theo, Bối cảnh, đề cập đến nền. Tại đây bạn có thể chỉ định màu nút, độ dốc của nút, kích thước nút và hòa trộn nền.

Phần Border có nhiệm vụ thiết lập độ bóng và đường viền cho nút. Bạn có thể dễ dàng điều chỉnh độ dày của đường viền, độ bo tròn của các góc và độ bóng của nút.

Phần tiếp theo, Transform, chịu trách nhiệm chuyển đổi nút - xoay, dịch chuyển, biến dạng.

Phần tiếp theo, Transition, chịu trách nhiệm về độ mượt của hoạt ảnh. Bạn đặt các cài đặt này theo nút của bạn. Các hành động có thể được áp dụng cho toàn bộ nút hoặc cho từng lớp riêng lẻ.

Sau khi thử vài lần, thử nghiệm các cài đặt và bạn sẽ hiểu đó là gì.

Sau khi định cấu hình giao diện ban đầu của nút, bạn có thể chuyển sang giai đoạn tiếp theo. Đây là một sửa đổi của nút khi di con trỏ chuột. Để thực hiện việc này, hãy nhấp vào hộp kiểm được chỉ định trong ảnh chụp màn hình.

Tùy chọn di chuột

Bây giờ tất cả các thay đổi cài đặt bạn thực hiện đều dành cho nút sẽ được hiển thị khi bạn di chuột qua nút đó. Và các cài đặt này phụ thuộc riêng vào từng nút. Ví dụ: tôi đã thay đổi cài đặt xoay, độ dốc và màu bóng.

Khi nút đã sẵn sàng, bạn có thể tiến hành cài đặt nút trong bài viết. Để thực hiện việc này, hãy cài đặt mã vào vị trí được yêu cầu trong bài viết:

Đây là ví dụ của chúng tôi:

Chà, bây giờ bạn đã biết cách tạo nút động cho trang web hoặc blog một cách dễ dàng và nhanh chóng. Hãy thử và thực hiện, nó đáng giá. Nếu bạn có bất kỳ câu hỏi nào, hãy viết trong phần bình luận, tôi sẽ cố gắng giúp đỡ.

Hôm nay chỉ vậy thôi, chúc bạn may mắn. Và tôi luôn vui mừng khi thấy bạn trên các trang blog của tôi.

tái bút Và đây là ví dụ về nút hoạt hình dành cho khóa đào tạo của Denis Gerasimov “Thiết lập lưu lượng truy cập lạnh để quảng bá các liên kết liên kết”. Tôi đã hoàn thành khóa đào tạo này và giới thiệu nó cho mọi người - không cường điệu quá mức, đây là một cách thực sự để kiếm tiền từ các chương trình liên kết. Về cơ bản đó là những gì tôi làm.

Hôm nay tôi muốn mách bạn cách tạo các nút thời trang bằng CSS thuần túy. Chúng ta sẽ tạo 4 kiểu, đó là các nút được tô một màu, các nút được bao quanh bởi đường viền, kiểu nút có bóng và màu tô, và 4 kiểu cuối cùng là các nút có hiệu ứng nhấp chuột. Chúng tôi sẽ thực hiện tất cả những điều tốt đẹp này mà không cần sử dụng bất kỳ tập lệnh nào, chỉ sử dụng CSS.

Demo Ι

Mã HTML cho các nút

Mã HTML chúng tôi sẽ sử dụng rất đơn giản. Đối với mỗi nút chúng ta sẽ xác định các lớp riêng biệt. Chúng tôi cũng sẽ thiết lập các lớp để áp dụng hiệu ứng khi di chuột và kích hoạt nút tương lai. Nói chung, đây là mã:

Kiểu CSS cho tất cả các nút

Các trình duyệt khác nhau hiển thị một số quy tắc CSS tiêu chuẩn hơi khác nhau. Do đó, trong mã CSS sau, chúng tôi sẽ đặt lại tất cả các kiểu và thêm một số giá trị mặc định. Đây là mã trông như thế nào:

Nút ( display: inline-block; lề: 0 10px 0 0; phần đệm: 15px 45px; cỡ chữ: 48px; họ phông chữ: "Bitter",serif; chiều cao dòng: 1.8; ngoại hình: không có; bóng hộp: không có; bán kính đường viền: 0; ) nút: lấy nét ( phác thảo: không có )

Nó không khó chút nào. Bây giờ chúng ta hãy xem xét kỹ hơn từng kiểu trong số 4 kiểu nút thời trang của chúng ta.

Các nút phẳng chứa đầy nền

Loại nút này rất phổ biến hiện nay vì nó đáp ứng mọi xu hướng thiết kế web hiện đại. Nói cách khác đây là phong cách phẳng hay còn gọi là Thiết kế phẳng. Hơn nữa, mọi người đã quen với những nút như vậy và sẵn sàng nhấp vào chúng.

Hình ảnh này hiển thị ba trạng thái của nút, bình thường (mặc định), khi di chuột và khi nhấp chuột hoặc hành động:

Mã CSS cho các nút này rất đơn giản. Đối với tôi, đây có vẻ là một điểm cộng rất lớn:

Nút phần.flat ( color: #fff; màu nền: #6496c8; bóng văn bản: -1px 1px #417cb8; viền: không có; ) phần.nút phẳng: di chuột, phần.nút phẳng.hover ( màu nền: #346392; bóng văn bản: -1px 1px #27496d; ) nút phần.flat: hoạt động, nút phần.flat.active ( màu nền: #27496d; bóng văn bản: -1px 1px #193047; )

Nút kiểu có viền hoặc viền

Kiểu nút này cùng loại với nút phẳng, điểm khác biệt duy nhất là ở đây chúng tôi loại bỏ phần tô màu và thay vào đó đặt quy tắc hiển thị đường viền của các nút. Hình ảnh này cho thấy mọi thứ rõ ràng:

Và như thường lệ code CSS rất đơn giản, chúng ta chỉ thêm quy tắc để đường viền xuất hiện:

Nút Sector.border ( color: #6496c8; nền: rgba(0,0,0,0); border: Solid 5px #6496c8; ) nút slice.border:hover,section.border nút.hover ( border-color: # 346392; màu: #346392; ) nút phần.border:hoạt động, nút phần.border.active ( màu viền: #27496d; màu: #27496d; )

Các nút có bóng và độ dốc trong CSS

Kiểu nút này có thể dễ dàng bị gọi là lỗi thời, nhưng ngay cả bây giờ nó vẫn có thể được tìm thấy trên Internet. Nếu các nút này phù hợp với phong cách trang web của bạn thì chúng chỉ dành cho bạn. Chúng cũng rất dễ làm, đây là hình ảnh:

Trong CSS, chúng ta sẽ sử dụng các quy tắc đổ bóng và tô màu gradient. Khi di chuột sẽ xuất hiện bóng xung quanh nút và khi nhấn vào bên trong.

Nút Mục.gradient ( color: #fff; text-shadow: -2px 2px #346392; Background-color: #ff9664; Background-image: Linear-gradient(top, #6496c8, #346392); box-shadow: inset 0 0 0 1px #27496d; đường viền: không có; bán kính đường viền: 15px; ) nút phần.gradient:hover, phần.gradient nút.hover ( box-shadow: inset 0 0 0 1px #27496d,0 5px 15px #193047; ) nút phần.gradient:hoạt động, nút phần.gradient.active ( box-shadow: inset 0 0 0 1px #27496d,inet 0 5px 30px #193047; )

Hiệu ứng nhấp chuột phong cách

Phong cách này hiện nay cũng rất phổ biến và được sử dụng rộng rãi trong thiết kế website. Người dùng có cảm giác như nút này thực sự đang được nhấn. Tại đây bạn có thể xem chi tiết trong hình ảnh:

CSS ở đây phức tạp hơn một chút và đòi hỏi một chút tính toán. Nhưng điều này có thể dễ dàng hiểu được. Nói chung mọi chuyện không đáng sợ đến thế. Chúng ta sẽ đặt một bóng không mờ bên dưới nút để nó tạo hiệu ứng như nút 3D hoặc có vẻ nhô ra một chút. Khi bạn di chuột qua các nút, chúng tôi sẽ làm nền tối hơn. Và khi người dùng nhấn vào nút thì chúng ta sẽ thay đổi vị trí của chính nút đó trong style. Và để làm cho tất cả trông ấn tượng và mượt mà hơn, chúng tôi sẽ thêm một phép chuyển đổi CSS3 (translateY). Bằng cách này, nút sẽ di chuyển xuống một cách trơn tru. Và đây là mã CSS:

Nút bấm phần ( color: #fff; màu nền: #6496c8; đường viền: không có; bán kính đường viền: 15px; bóng hộp: 0 10px #27496d; ) nút bấm phần: di chuột, phần.nhấn nút.hover ( màu nền: #417cb8 ) nút phần.press:active, phần.nhấn nút.active ( màu nền: #417cb8; bóng hộp: 0 5px #27496d; biến đổi: dịchY(5px); )

Demo Ι

Phần kết luận

Đó là tất cả! Bây giờ bạn có các nút thời trang và hiện đại mà bạn có thể sử dụng cho nhu cầu của mình. Đương nhiên, bạn có thể thay đổi chúng cho đến khi không thể nhận dạng được, đây chỉ là ví dụ đơn giản nhất về việc triển khai loại nút này. Tôi hy vọng bạn thích bài học này. Hẹn sớm gặp lại!