Kiểu nút CSS – Di chuột, Màu và Nền – css thay đổi màu nền khi di chuột

Trong bài viết này, bạn sẽ thấy cách tạo kiểu cho một nút bằng CSS. Mục tiêu của tôi ở đây chủ yếu là giới thiệu 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ế cũng như sẽ thảo luận về các ý tưởng tạo kiểu dáng. Thay vào đó, đây sẽ là một cái nhìn tổng quan hơn

Bạn đang xem: css thay đổi màu nền khi chuyển đổi khi di chuột qua

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

Mục tiêu của tôi ở đây chủ yếu là giới thiệu 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ế cũng như sẽ không thảo luận về các ý tưởng tạo kiểu.

Thay vào đó, đây sẽ là phần tổng quan hơn về cách hoạt động của chính các kiểu, 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ẽ thấy cách tạo một nút trong HTML. Sau đó, bạn sẽ học cách ghi đè các kiểu nút mặc định. Cuối cùng, bạn sẽ biết cách tạo kiểu cho các nút cho ba trạng thái khác nhau của chúng.

Mục lục

Hãy bắt đầu!

Cách tạo nút trong HTML

Để tạo một nút, hãy sử dụng phần tử & lt; button & gt; .

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

Trong tệp index.html bên dưới, tôi đã tạo cấu trúc cơ bản cho trang web và thêm một nút duy nhất:

  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
    & lt; meta charset = "UTF-8" & gt;
    & lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
    & lt; link rel = "stylesheet" href = "style.css" & gt;
    & lt; title & gt; Kiểu Nút CSS & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
    & lt; button type = "button" class = "button" & gt; Nhấp vào tôi! & lt; / button & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Hãy chia nhỏ dòng & lt; button type = "button" class = "button" & gt; Nhấp vào tôi! & lt; / button & gt; :

  • Trước tiên, bạn thêm phần tử nút, bao gồm thẻ mở & lt; nút & gt; và đóng & lt; / button & gt; .
  • Thuộc tính type = "button" trong thẻ mở & lt; button & gt; tạo một nút có thể nhấp. Vì nút cụ thể này không được sử dụng để gửi biểu mẫu, vì lý do ngữ nghĩa, bạn nên thêm nó vào để làm cho mã rõ ràng hơn và không kích hoạt bất kỳ hành động không mong muốn nào.
  • Thuộc tính class = "button" sẽ được sử dụng để tạo kiểu cho nút trong một tệp CSS riêng biệt. Giá trị button có thể là bất kỳ tên nào khác mà bạn chọn. Ví dụ: bạn có thể đã sử dụng class = "btn" .
  • Văn bản Nhấp vào tôi! là văn bản hiển thị bên trong nút.

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

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. Bạn thực hiện việc này với thẻ & lt; link rel = "stylesheet" href = "style.css" & gt; được sử dụng trong index.html .

Trong tệp style.css , tôi đã thêm một số kiểu chỉ căn giữa nút ở giữa cửa sổ trình duyệt.

Lưu ý rằng class = "button" được sử dụng với bộ chọn .button . Đây là một cách để áp dụng kiểu trực tiếp cho nút.

  * {
    box-sizing: border-box;
}

thân hình {
    hiển thị: flex;
    justify-content: trung tâm;
    align-các mục: trung tâm;
    margin: tự động 50px;
}

.cái nút {
    vị trí: tuyệt đối;
    hàng đầu: 50%
}
 

Đoạn mã ở trên sẽ dẫn đến kết quả sau:

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

Đây là ví dụ về giao diện của các kiểu gốc cho các nút trên trình duyệt Google Chrome.

Xem Thêm  Hàm numpy.ndarray.sort () trong Python - BTech Geeks - cách sắp xếp mảng numpy trong python

Cách thay đổi kiểu 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 background-color và cung cấp cho nó một giá trị màu theo sở thích của bạn.

Trong bộ chọn .button , bạn sử dụng background-color: # 0a0a23; để thay đổi màu nền của nút.

 . nút {
    vị trí: tuyệt đối;
    top: 50%;
    màu nền: # 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 đã biến mất.

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

Tiếp theo, sử dụng thuộc tính color để thay đổi màu của văn bản:

 . nút {
    vị trí: tuyệt đối;
    top: 50%;
    màu nền: # 0a0a23;
    màu: #fff;
}
 

Cách thay đổi kiểu viền của nút

Nhận thấy màu xám xung quanh các cạnh của nút? Đó là màu mặc định của đường viền của nút.

Một cách để khắc phục điều này là sử dụng thuộc tính border-color . Bạn đặt giá trị giống với giá trị của background-color . Điều này đảm bảo các đường viền có cùng màu với màu nền của nút.

Một cách khác là loại bỏ hoàn toàn đường viền xung quanh nút bằng cách sử dụng border: none; .

 . nút {
  vị trí: tuyệt đối;
  top: 50%;
  màu nền: # 0a0a23;
  màu: #fff;
  biên giới: không có;
}
 

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 border-radius , như sau:

 . nút {
    vị trí: tuyệt đối;
    top: 50%;
    màu nền: # 0a0a23;
    màu: #fff;
    biên giới: không có;
    bán kính đường viền: 10px;
  }
 

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-shadow :

  vị trí: tuyệt đối;
    top: 50%;
    màu nền: # 0a0a23;
    màu: #fff;
    biên giới: không có;
    bán kính đường viền: 10px;
    box-shadow: 0px 0px 2px 2px rgb (0,0,0);
 

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 đường viền của nút là tăng padding của nút.

Bên dưới, tôi đã thêm giá trị 15px cho phần đệm trên cùng, dưới cùng, 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 min-height min-width 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.

 . nút {
    vị trí: tuyệt đối;
    top: 50%;
    màu nền: # 0a0a23;
    màu: #fff;
    biên giới: không có;
    bán kính đường viền: 10px;
    đệm: 15px;
    chiều cao tối thiểu: 30px;
    chiều rộng tối thiểu: 120px;
  }
 

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

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

  • : hover
  • : focus
  • : active

Tốt nhất là ba trạng thái được tạo kiểu khác nhau và không có cùng kiểu.

Trong các phần sau, tôi sẽ giải thích ngắn gọn về ý nghĩa của từng trạng thái và điều gì kích hoạt chúng. Bạn cũng sẽ thấy một số cách 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 : hover Kỳ

Trạng thái : hover xuất hiện khi người dùng di chuột qua một nút, bằng cách đưa chuột hoặc bàn di chuột của họ lên đó mà không cần chọn hoặc nhấp vào nút đó.

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

Một thay đổi phổ biến cần thực hiện với : hover là chuyển đổi màu nền của nút.

Để thay đổi ít đột ngột hơn, hãy ghép nối : hover với thuộc tính chuyển đổi .

Thuộc tính transfer sẽ giúp chuyển đổi từ trạng thái không sang trạng thái : hover 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 khi không có thuộc tính chuyển đổi . Điều này cũng sẽ giúp làm cho kết quả cuối cùng ít gây khó chịu cho người dùng.

 . button: hover {
      màu nền: # 002ead;
      chuyển tiếp: 0,7s;
  }
 

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.

Xem Thêm  Văn bản gạch chân HTML - Cách sử dụng thẻ với mã mẫu - làm thế nào để gạch dưới văn bản html

Với sự trợ giúp của thuộc tính transfer , tôi cũng gây ra độ trễ 0,7 giây khi chuyển đổi từ trạng thái không sang trạng thái : hover xảy ra. Điều này khiến quá trình chuyển đổi chậm hơn từ màu nền # 0a0a23 ban đầu sang màu nền # 002ead .

hover

Hãy nhớ rằng : hover giả cổ điển không hoạt động cho màn hình thiết bị di động và ứng dụng dành cho thiết bị di động. Chọn chỉ sử dụng hiệu ứng di chuột cho các ứng dụng web trên máy tính để bàn chứ không phải màn hình cảm ứng.

Cách tạo kiểu : focus Kỳ

Trạng thái : focus có hiệu lực đối với người dùng bàn phím – cụ thể là nó sẽ kích hoạt khi bạn lấy tiêu điểm vào một nút bằng cách nhấn phím Tab ().

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

focus-5

Nhận thấy đường viền màu xanh lam nhạt nhẹ xung quanh nút khi nó được lấy nét?

Các trình duyệt có kiểu mặc định cho kiểu giả cổ : focus , cho mục đích điều hướng bàn phím trợ năng. Không nên xóa hoàn toàn phác thảo đó.

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

Một cách để làm như vậy là đặt màu đường viền trước tiên là trong suốt .

Sau đó, bạn có thể duy trì outline-style thành solid . Cuối cùng, bằng cách sử dụng thuộc tính box-shadow , bạn có thể thêm màu theo ý thích của mình khi phần tử được tập trung vào:

  .button: focus {
    outline-color: trong suốt;
    outline-style: solid;
    hộp-bóng: 0 0 0 4px # 5a01a7;
}
 

focusend < / p>

Bạn cũng có thể ghép nối lại các kiểu này với thuộc tính chuyển đổi , tùy thuộc vào hiệu ứng bạn muốn đạt được:

  .button: focus {
    outline-color: trong suốt;
    outline-style: solid;
    hộp-bóng: 0 0 0 4px # 5a01a7;
    chuyển tiếp: 0,7s;
}
 

focusend1 < / p>

​​Cách tạo kiểu cho : active State

Trạng thái : active được kích hoạt khi bạn nhấp vào nút bằng cách nhấp vào chuột máy tính hoặc nhấn xuống bàn di chuột của máy tính xách tay.

Như đã nói, hãy xem điều gì sẽ 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 trạng thái : hover : focus :

active-1

Các kiểu trạng thái : hover được áp dụng trước khi nhấp khi tôi di chuột qua nút.

Các kiểu trạng thái : focus cũng được áp dụng vì khi một nút được nhấp vào, nút đó cũng đạt được trạng thái : focus cùng với : active một.

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

Trạng thái

​​: focus là khi một phần tử đang được lấy tiêu điểm và : active là khi người dùng nhấp vào 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 một nút, hãy áp dụng kiểu cho trình dò ​​giả CSS : active .

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út đó

 . button: active {
    màu nền: # ffbf00;
}
 

activefinal < / p>

Kết luận

Và bạn đã có nó! Giờ bạn đã biết những điều cơ bản về cách tạo kiểu cho một nút bằng CSS.

Chúng ta đã xem 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 Giấy 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 hành và 5 dự án chứng nhận.

Lưu ý rằng chứng chỉ trên vẫn đang trong giai đoạn thử nghiệm - nếu bạn muốn có 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à chúc bạn viết mã vui vẻ!


Xem thêm những thông tin liên quan đến chủ đề css thay đổi màu nền khi di chuột

Scroll to section smooth scrolling like onepage website using HTML, CSS & jQuery Smooth Scroll

alt

  • Tác giả: LearnDesign
  • Ngày đăng: 2019-11-06
  • Đánh giá: 4 ⭐ ( 9380 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: smoothscroll howto OnePager jquerytutorial learndesign

    Hello friends, In this video i am creating scroll to section with smoothscroll like onepager website using html, css and jquery and i using jquery scrollTop function, jquery animate function and little bit css for styling webpage.

    Must watch next video : https://youtu.be/s0lnKfHfO8s
    (How to navigate to another page with a smooth scroll using html,css,jquery)

    For more Interesting and educational videos please visit my change link below
    LearnDesign Channel : https://youtube.com/learndesigntutorial

    ------------------------------------------------------------------------------------------------
    PLEASE SUBSCRIBE TO THIS CHANNEL FOR MORE VIDEOS
    ------------------------------------------------------------------------------------------------

    Resizing text dynamically using html,css and jquery
    https://youtu.be/zFmsI6VEB7I

    Easy tutorial equal height columns using only jquery
    https://youtu.be/11juMDPW9jw

    Scroll to target smooth scrolling using html,css and jquery
    https://youtu.be/nDOI7QEOemk

    CSS style switch light and dark mode using html,css and Jquery
    https://youtu.be/Qv1AtLakQJI

    Color to Grayscale Image on Jquery Mousemove
    https://youtu.be/Qt3GUF4mkas

    Beautiful Website Loading Animation Only CSS
    https://youtu.be/5PlXjN08LVw

    Easy Tutorial Change Background Color Using Jquery Mousemove
    https://youtu.be/YAFo5W4kM9g

    Awesome CSS Gradient Button Hover Effects
    https://youtu.be/29juAChSYUQ

    Change background image on hover with css transition effects
    https://youtu.be/igpFs7uoKP0

    Jquery mousemove focus effects
    https://youtu.be/E0exVvpQXeM

    Easy tutorial to change background color onclick or hover method
    https://youtu.be/sK8WQ_EWhfY

    Easy tutorial to like button heart effects using jquery
    https://youtu.be/baaSvb2jaaY

    Pure CSS Button Animation Wave Effects
    https://youtu.be/dzK9Lo_FCRM

    I am lily portfolio website using html and css
    Part 1 : https://youtu.be/8RbUObOTRX4
    Part 2 : https://youtu.be/5vB2fqyXXRs
    Part 3 : https://youtu.be/MJTridr8HUg

    Creative designer and director portfolio
    Preview : https://youtu.be/0HEqqXN5wPw
    Part 1 : https://youtu.be/washtSkOD3s
    Part 2 : https://youtu.be/tUDCZxJfcko

    Personal portfolio website html and css
    Preview : https://youtu.be/GdYaIe66b_M
    Part 1 :https://youtu.be/xbW8MDZ3NVI
    Part 2 : https://youtu.be/wh4rDZwEelA
    Part 3 : https://youtu.be/RpQgezLydBA
    Part 4 : https://youtu.be/Hr80nvEpRgs

    ------------------------------------------------------------------------------------------------
    Email : help.learndesign@gmail.com

Hover css: Xử lý thay đổi css khi di chuột vào một phần tử html

  • Tác giả: unitop.com.vn
  • Đánh giá: 3 ⭐ ( 5937 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

CSS: Thay đổi màu khi di chuột

  • Tác giả: vi.faithcov.org
  • Đánh giá: 4 ⭐ ( 5781 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vì vậy, tôi đã làm việc trên một trang web với các hình ảnh có thể nhấp được, nhưng dường như tôi không thể hiểu được ...: di chuột phải. Tôi muốn rằng hình ảnh được phủ bởi màu trắng với độ mờ 0,1. <>

Hiệu ứng hình ảnh cuộn qua CSS – Thay đổi hình ảnh khi di chuột

  • Tác giả: doanhaiblog.com
  • Đánh giá: 5 ⭐ ( 5632 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Điều này từng được triển khai bằng JavaScript, khá dễ dàng chỉ với một lượng nhỏ tập lệnh. Để làm cho hình ảnh cuộn qua hoạt động, các thuộc tính onmouseover

17 MẪU HIỆU ỨNG CSS HÀNG ĐẦU HIỆN NAY

  • Tác giả: aptech-danang.edu.vn
  • Đánh giá: 5 ⭐ ( 9591 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn đã có thể nhận thấy số lượng các ví dụ hiệu ứng CSS có trên các trang web đã tăng lên gần đây. Hiệu ứng đã tạo ra một giật gân trực tuyến và được thiết lập để trở thành một trong những xu hướng thiết kế web quan trọng của năm 2018 . Tất cả trên web, các nhà thiết kế đang sáng tạo và sử dụng hoạt ảnh CSS để mang cá tính đến trang web của họ, giải thích các ý tưởng phức tạp một cách nhanh chóng và dễ dàng và hướng dẫn hành động của người dùng.

Thiết lập màu nền với CSS background

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 6164 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách thiết lập màu nền với CSS background, sử dụng các thuộc tính background, background-image, background-repeat

Làm cách nào để thay đổi màu khi di chuột qua bảng trong Bootstrap?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 1738 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Hãy thử cái này: .table-hover tbody tr:hover td, .table-hover tbody tr:hover th { background-color: #color; }

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình