Nút html css đẹp. – Màu đen trắng đơn giản

Trước tiên, bạn cần tải xuống nguồn và chọn chủ đề thiết kế cho các nút. Bạn có thể chọn thiết kế mà bạn thích. Ví dụ: hãy lấy chủ đề đầu tiên, winona.

Tải xuống

Các bài viết tương tự về chủ đề này:

Mở tệp trong trình chỉnh sửa chỉ mục.html từ nguồn, chúng tôi tìm thấy thẻ mà chúng tôi quan tâm. Trong trường hợp của tôi:

Từ mã này, chúng tôi có một dòng với lớp cái nút.

Chúng tôi dán mã vào bất kỳ vị trí cần thiết nào trong tệp có mã của dự án của chúng tôi giữa thẻ .
Thay đổi tên của nút thành tên bạn cần. Trong trường hợp của tôi, tôi sẽ đổi tên thành “Open”

Sao chép và dán nó vào giữa các thẻ V. tập tin chỉ mục dự án của bạn.

Từ ví dụ, bạn có thể thấy rằng một kiểu nhất định được thêm vào nút bằng cách sử dụng lớp bổ sung tương ứng với tên của chủ đề.

Trong trường hợp của chúng tôi đây là lớp nút-winona. Do đó, các kiểu có tên winona sẽ được thêm vào.

Điều này rất thuận tiện, bởi vì... nếu bạn muốn thay đổi thiết kế của các nút, bạn chỉ cần thay thế tên của lớp bổ sung trong thẻ . Và các kiểu đã được ghi trong tập tin nút.css!

Mỗi ngày, các tiêu chuẩn mới css3 và html5 ngày càng tham gia sâu hơn vào cuộc sống của các nhà thiết kế bố cục và nhà phát triển web, đồng thời các trình duyệt ngày càng trở nên tương thích hơn với các tiêu chuẩn này.

Liên quan đến sự kiện này, tôi muốn giới thiệu với bạn tuyển tập 10 nút css3 có thể giúp cuộc sống của bạn dễ dàng hơn khi viết mã và tạo web các ứng dụng.

1. Nút siêu tuyệt vời.

Bộ này Các nút sử dụng một bộ css3 và cả màu RGBA.

Việc thêm bộ nút này vào trang của bạn không khó, bạn cần kết nối mẫu css và thêm các lớp cần thiết vào các liên kết để thay đổi màu sắc, hình dạng, v.v.

Ví dụ kết nối:

Nút siêu tuyệt vời" Nút màu xanh tuyệt vời" Nút màu đỏ tươi tuyệt vời" Nút màu đỏ tuyệt vời" Nút màu cam tuyệt vời" Nút màu vàng tuyệt vời"

2. Nút Google.

Các nút này được dựa trên trang chủ Google.com. Chúng cũng đơn giản và tối giản.

Ví dụ kết nối:

Tìm kiếm trên Google Tôi cảm thấy may mắn

3. Nút chuyển màu CSS3.

Ví dụ kết nối:

H3

4. Nút CSS3 Kick-Ass.

5. Biểu tượng truyền thông xã hội CSS thuần túy.

Ví dụ kết nối:

• Facebook
• Twitter
• RSS
• Flickr
• Thơm ngon
• LinkedIn
• Google
• Orkut
• Technorati
• NetVibes

6. Nút CSS3 cực kỳ lạ mắt.

Tất cả chủ sở hữu thiết bị iOS chắc chắn sẽ nhận ra các nút này; các nút tương tự đã có trên thiết bị iOS kể từ phiên bản đầu tiên. Các nút này, giống như nhiều nút được trình bày ở đây, có cài đặt màu sắc và kích thước và được tạo bằng css3 thuần túy.

Ví dụ kết nối:

7. BonBon: Nút CSS3 ngọt ngào.

Ví dụ kết nối:

8. Các nút CSS3 trông thực tế.

Ví dụ kết nối:

9. Các nút Github CSS3 đơn giản.

Ví dụ kết nối:

10. Nút chuyển đổi CSS3 linh hoạt.

Ví dụ kết nối:

Hôm nay tôi muốn hướng dẫn các bạn cách làm những chiếc nút sành điệu trên 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ã:

Cái nút :bay lượn :tích cực Cái nút :bay lượn :tích cực Cái nút :bay lượn :tích cực Cái nút :bay lượn :tích cực

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

Các trình duyệt khác nhau, một số trình duyệt tiêu chuẩn Quy tắc CSS hiển thị hơi khác một chút. 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: none; bán kính đường viền: 0; ) nút: tiêu điểm ( phác thảo: không )

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 được tất cả xu hướng hiện đại thiết kế web. 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 viền: hoạt động, nút phần viền. hoạt động ( 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: inet 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,inset 0 5px 30px #193047; )

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

Phong cách này cũng rất phổ biến hiện nay 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ó phong cách và nút 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!

Tôi đã chọn một số nút CSS mà tôi nghĩ có thể sử dụng trong các dự án web.

Trình tạo nút CSS3

Nhìn vào máy phát điện Các nút CSS3 từ Sanwebe:

Nút CSS3 màu hồng với phông chữ Pacifico

đẹp nút màu hồng (ngoài một ít mã jQuery để phát nhạc và thay đổi văn bản nội bộ ) được tạo hoàn toàn dựa trên CSS3:

Bộ sưu tập các nút 3D

Tổng hợp các nút 3D được tạo bằng CSS3:

Nút 3D xã hội

Xuất sắc nút xã hội, được tạo bằng CSS3 và phông chữ biểu tượng:

Các nút CSS3 hoạt hình

Các nút CSS hoạt hình với các mẫu nền. Có thể không hoạt động ở Trình duyệt Firefox 3.6 và IE10:

Các nút CSS3 hoạt hình tròn

Dưới đây là một số nút hoạt hình khác trong đó việc xoay văn bản khi di chuột qua sẽ mang lại hiệu ứng thực sự thú vị:

Nút tròn sạch

Đây là một ví dụ khác nút tròn CSS3:

Chuyển đổi các nút trong CSS3

Các nút radio được thực thi tốt được tạo bằng CSS3 và phông chữ biểu tượng:

Nút CSS3 hoạt hình

Nút 3D dễ thương được tạo bằng phông chữ CSS3 và Google:

Hiệu ứng nút CSS3

Các nút này thể hiện hoạt ảnh bằng cách sử dụng tính chất khác nhau CSS3:

Nút CSS3 bóng loáng

Bây giờ bạn có thể hoàn toàn chắc chắn rằng các nút bóng có thể được tạo dễ dàng bằng CSS3, không cần Photoshop nữa:

Nút CSS3 3D

Thật ngạc nhiên những gì bạn có thể làm với các phần tử giả CSS3 :trước và :after. Kiểm tra các nút 3D tuyệt vời:

Công tắc CSS3

Ví dụ về nút chuyển đổi trong CSS3 mà không sử dụng JavaScript:

Hiệu ứng nút lật 3D

Hiệu ứng lật 3D khi nhấp vào nút được tạo bằng CSS3:

Nút thương hiệu

Nút CSS đẹp từ các thương hiệu phổ biến sử dụng biểu tượng bootstrap:

Nút tròn màu tối

Nút tròn có sử dụng jQueryđể tạo hiệu ứng thả khi nhấn nút:

Công tắc CSS3

Chuyển đổi được tạo bằng CSS3:

Nút phẳng đẹp

Bộ sưu tập các nút CSS phẳng cho mọi trường hợp, không có hoạt ảnh hoặc hiệu ứng:

Nút chia sẻ xã hội

Hơn phiên bản hấp dẫn nút truy cập công cộng, nhưng không có chức năng. Theo nhà phát triển, chúng sẽ hoạt động trong IE7+:

nút giáng sinh

Nút CSS Giáng sinh sử dụng data:urls, một phương pháp nhúng hình ảnh trực tiếp vào tài liệu:

Nút mềm

Nút tròn bóng được tạo bằng CSS3:

Nút mềm

Các nút chỉ được sử dụng Ký tự Unicode, cho phép bạn sử dụng phông chữ văn bản hoặc biểu tượng:

Các nút CSS3 hoạt hình 3D lớn

Một bộ nút CSS hoạt hình 3D khác dành cho trang web. Hoạt ảnh được thực hiện bằng cách sử dụng thuộc tính hoạt ảnh và khung hình chính:

Nút CSS3 kim loại

Một bộ sưu tập các nút CSS3 bằng kim loại có ký hiệu được tạo bằng phông chữ pictos sử dụng @font-face . Vì hiệu ứng kim loại các thuộc tính bóng hộp và độ dốc tuyến tính đã được sử dụng:

Nút CSS3 tròn

Một bộ sưu tập các nút tròn hoạt hình khác trong CSS3:

Các nút phương tiện truyền thông xã hội có thể nhấp bằng CSS3

Các nút sử dụng các thuộc tính CSS3 đơn giản như độ dốc, bóng hộp, bóng văn bản, v.v. Các trạng thái "không hoạt động" và "hoạt động" cũng được bao gồm trong tập hợp này:

Các nút CSS3 đơn giản

Nút CSS đẹp:

Nút tải xuống 3D

Nút 3D này sử dụng chuyển đổi phối cảnh. Nó chỉ hoạt động trong các trình duyệt dựa trên webkit:

Các nút truyền thông xã hội CSS3 tuyệt vời

Nút lớn

Nút CSS3 bóng loáng với hiệu ứng đổ bóng ở phía dưới. Nút này sử dụng phông chữ có tên Sansita One từ bộ sưu tập của Google:

Các nút đơn giản

Một số CSS đơn giản nút:

Các nút truyền thông xã hội CSS3

Nút CSS đơn giản

Một tập hợp các nút CSS đơn giản. Chúng rất dễ cài đặt và sử dụng. Chúng có thể dễ dàng tích hợp với Font-Awesome hoặc thư viện khác:

Các nút ở dạng chip poker

Một ví dụ về một nút đơn giản ở dạng chip poker. Nó cũng có thể được sử dụng như một nút có hiệu ứng di chuột:

Nút trượt

Ý tưởng Nút trượt CSS:

Nút menu quản trị

Bảng quản trị ( menu hoặc điều hướng) bằng cách sử dụng CSS3 và khung fontawgie. Khi chuyển sang một nút, lớp hoạt động sẽ được thêm bằng jQuery:

Khâu vào nút

Một nút đơn giản với một dòng thể hiện sức mạnh của CSS3 mà không cần sử dụng hình nền:

Nút xoay

Nút tròn có viền xoay để biểu thị thao tác di chuột:

Nút trong CSS3

Nút mềm được tạo bằng CSS3 dựa trên ví dụ này:

Nút CSS3 có thẻ trượt

Các nút CSS này trông giống như những tấm thẻ tuột ra khỏi tay áo. Chúng có thể được sử dụng để hiển thị thông tin cần ẩn cho đến khi người dùng thực hiện lựa chọn:

Hoạt ảnh của các nút CSS3 dưới dạng kẹo

Nút có hình động để hiển thị trạng thái tải:

Công tắc CSS3

Các nút radio đẹp mắt sử dụng jQuery để chuyển đổi một lớp:

Nút bóng

Bộ nút đẹp cho website CSS. Các đặc tính khác nhau được sử dụng để mang lại vẻ ngoài bóng bẩy ba chiều:

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

Đối với các nút sẽ được sử dụng rất HTML đơn giản mã số:

Đặt mua

CSS

Ngoài ra tất cả các nút sẽ có cài đặt chungđối với văn bản chú thích và bỏ chọn các 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 nó khi nút đơn giản kèm theo khá nhiều mã CSS. TRONG phần này Dưới đây là 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 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

Rất đơn giản và phổ biến hiệu ứng CSS cho 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 thêm tùy chọn ánh sáng màu sắc trong Photoshop để có đượ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 ý những gì chúng tôi sử dụng hình nền. Điểm xuất phát nền đượ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ề: 0 0 50px hiển thị: căn chỉnh văn bản: 58px;

Hiệu ứng CSS3

TRONG trong ví dụ này không có gì đặc biệt - các góc và bóng 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: chiều cao dòng: 58px;

Hiệu ứng CSS3

TRONG 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( đáy, 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));