Làm thế nào để tạo hiệu ứng thay đổi màu nút bằng HTML và CSS? – thay đổi màu nút trong html

Cổng thông tin Khoa học Máy tính dành cho những người yêu thích máy tính. Nó bao gồm các bài báo về khoa học máy tính và lập trình được viết tốt, được tư duy tốt và được giải thích tốt, các câu đố và thực hành / lập trình cạnh tranh / các câu hỏi phỏng vấn công ty.

Bạn đang xem : thay đổi màu nút trong html

Cách tạo hiệu ứng để thay đổi màu nút bằng HTML và CSS?

Màu – hiệu ứng thay đổi của một nút là rất phổ biến nhưng những gì chúng tôi sẽ làm một phiên bản nâng cao hơn một chút của hiệu ứng này. Nền sẽ thay đổi giống như hiệu ứng clip xoay ở một số góc cụ thể.

Cách tiếp cận: Cách tiếp cận là cung cấp hai hoặc ba nền và sau đó xoay chúng theo các góc khác nhau.

Mã HTML: Trong phần này, chúng tôi sẽ sử dụng mã HTML để thiết kế cấu trúc nội dung.

< p class = "line number1 index0 alt2"> & lt;! DOCTYPE html & gt;

& lt; html lang = "en" & gt;

< / code>

& lt; head & gt;

& lt; meta bộ ký tự = " UTF-8 " / & gt;

& lt; meta tên = " viewport " content =

"width = device-width, initial-scale = 1.0 " / & gt;

& lt; title & gt; Hiệu ứng nút & lt; / title & gt;

& lt; / head & gt;

& lt; < / code> body & gt;

& lt; a href = "#" & gt; GeeksforGeeks & lt; / a & gt;

& lt; / body & gt;

& lt; / html & gt;

 
 

Mã CSS: Trong phần này, chúng tôi sẽ làm theo một số bước để thiết kế hiệu ứng nút.

  • Bước 1: Trước tiên, chúng tôi đặt vị trí của nút và sau đó sử dụng thuộc tính text-decoration để xóa gạch chân khỏi liên kết. Ngoài ra, hãy đặt chiều rộng, chiều cao, màu sắc và màu nền của nút.
  • Bước 2: Ở đây, chúng tôi áp dụng nền thứ hai bằng cách xoay bằng trước bộ chọn. Chúng tôi đã sử dụng z-index để hiển thị nền này ở trên cùng của nền khác.
  • Bước 3: Bây giờ, áp dụng nền cuối cùng với một mức độ xoay khác bằng cách sử dụng lựa chọn lồng nhau của cả hai di chuột trước bộ chọn .

Mẹo: Bạn có thể thay đổi mức độ xoay để thay đổi hiệu ứng tùy theo nhu cầu của bạn.

Dưới đây là việc thực hiện ba bước trên.

< / p>

< code class = "trơn"> & lt; style & gt;

body {

padding : 0 ;

margin : 0 ;

}

a {

vị trí : tuyệt đối ;

đầu trang : 40% ;

left : 40% ;

biến đổi: translate ( - 50% , < / code> - 50% );

width : 180px ;

height : 60px ;

color : trắng ;

text-decoration : none ;

text-align : center ;

padding-top : 30px ;

font-size : 20px ;

tràn : hidden ;

background : green ;

}

a :: trước {

nội dung : "" < / code> ;

vị trí : tuyệt đối ;

width : 0 ;

height : 0 ;

left : 0 ;

bottom : 0 ;

< p class = "line number30 index29 alt1"> border-style : solid ;

border-color : # f00 ;

border-width < / code> : 80px 100px ;

< / code> z-index : - 1 ;

biến đổi: xoay ( 360 deg);

chuyển tiếp: 1 s; < / p>

biến đổi-origin: left ;

}

a: hover :: trước {

border-color : # 00f ;

biến đổi: xoay ( 60 deg);

}

& lt; / style & gt;

 
 

Mã hoàn chỉnh: Trong phần này , chúng tôi sẽ kết hợp phần trên với phần để tạo hiệu ứng thay đổi màu sắc trên nút bằng HT ML và CSS.

& lt;! DOCTYPE html & gt;

& lt; html lang = "vi" & gt;

& lt; head & gt;

& lt; meta bộ ký tự = < / code> "UTF-8" / & gt;

& lt; meta name = " viewport "

content = "width = device-width, initial-scale = 1.0" / & gt;

& lt; title & gt; Hiệu ứng nút & lt; / title & gt;

& lt; style & gt;

body {

padding: 0;

< code class = "trơn"> margin: 0;

}

< code class = "undefined space"> a {

vị trí: tuyệt đối;

top: 40%;

left: 40%;

< code class = "trơn"> biến đổi: translate (-50%, -50%);

width: 180px;

height: 60px;

color: trắng;

text-decoration: none;

text-align: center;

padding-top: 30px;

font-size: 20px;

tràn: hidden;

background: green;

}

a :: before {

content: ""; < / p>

vị trí: ab chất tan;

width: 0;

height: 0;

left: 0;

bottom: 0;

border-style: solid;

border-color: # f00;

< / code> border-width: 80px 100px;

z-index: -1;

biến đổi: xoay (360deg);

chuyển tiếp: 1s;

< code class = "trơn"> biến đổi-origin: left;

}

a: hover :: before {

border-color: # 00f;

biến đổi: xoay (60deg);

}

< code class = "undefined space"> & lt; / style & gt;

& lt; / head & gt;

& lt; body & gt;

< p class = "line number55 index54 alt2"> & lt; a href = "#" & gt; GeeksforGeeks & lt; / a & gt;

& lt; / body & gt;

& lt; / html & gt;

 
 

< p> Đầu ra:

Ghi chú cá nhân của tôi


Xem thêm những thông tin liên quan đến chủ đề thay đổi màu nút trong html

Change Website Color Theme Button

alt

  • Tác giả: GeekLaunch
  • Ngày đăng: 2016-09-07
  • Đánh giá: 4 ⭐ ( 4400 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Create a button to change the theme of your website, alternating between light and dark themes. Technologies used include Sass (SCSS) and JavaScript Web Storage API (localStorage).

    More about localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

    Get the code from GitHub: https://github.com/GeekLaunch/change-theme-button

    GeekLaunch produces educational videos covering such topics as Linux, web development (including HTML5, CSS 3, JavaScript, and PHP), Java programming, tips for power users, among many others. Subscribe: New video every Wednesday!

    Not a geek? Start today!

Tạo hiệu ứng button chuyển màu cực cool bằng CSS3

  • Tác giả: www.thuthuatweb.net
  • Đánh giá: 4 ⭐ ( 7848 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết kế web,Hướng dẫn làm Blog, Web

Xử lý sự kiện trong trang HTML với JavaScript

  • Tác giả: www.voer.edu.vn
  • Đánh giá: 4 ⭐ ( 5807 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: - (giáo trình - tài liệu - học liệu từ VOER)

Cách để Đổi màu button trong HTML

  • Tác giả: www.wikihow.vn
  • Đánh giá: 5 ⭐ ( 1764 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết này sẽ hướng dẫn bạn cách đổi màu button (nút) trong HTML. Bạn có thể thay đổi màu nút bằng cách sử dụng plain HTML (HTML đơn thuần) hoặc CSS (các tập tin định kiểu theo tầng) trong HTML5. Gõ vào phần thân HTML. Đây là khởi đầu...

Màu trong HTML

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 5633 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Màu trong HTML - Học HTML cơ bản và nâng cao theo các bước đơn giản và dễ hiểu từ HTML là gì, Tag trong HTML, HTML tag, thẻ trong HTML, tổng hợp các thẻ HTML cơ bản, thẻ meta, thuộc tính, định dạng, thẻ trong HTML, commemnt, font, marquee, hình ảnh, link, bảng, frame, danh sách, layout, màu, form, background, style sheet, và sử dụng javascript.

Cách để Đổi màu button trong HTML

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

Thay đổi backgroud của thẻ HTML bằng Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 1014 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cho một đoạn mã HTML có sẵn như dưới đây, hãy viết một đoạn mã Javascript khi click vào button#btn1 thì đổi màu bacckground cho thẻ div#content sang màu đỏ,.

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

Xem Thêm  Cách đọc và ghi tệp văn bản trong Java - mở tệp txt trong java