Hướng dẫn how do i link a button to css in html? - làm cách nào để liên kết một nút với css trong html?

38

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Về cơ bản, tôi thích cách mà được tạo kiểu, với nút có thể nhấp khi bạn thêm một chút CSS. Tuy nhiên, các nút thông thường không được tạo kiểu như vậy, chúng không có khả năng nhấp như vậy mà không có một số CSS hoặc JS chính và bạn phải sử dụng hình ảnh.

Tôi đã gửi các nút vào các liên kết, bằng cách sử dụng hành động biểu mẫu, nhưng điều này đòi hỏi tôi phải tạo một biểu mẫu mới cho mỗi nút. Làm thế nào tôi có thể tìm thấy một phương tiện hạnh phúc? Sử dụng nhiều biểu mẫu gây ra vấn đề trong kiểu dáng của tôi mà dường như tôi không thể khắc phục được trừ khi tôi tìm ra cách khác để tạo các nút liên kết trong HTML, có kiểu mặc định khiến chúng có trạng thái nhấn (và ý tôi là không có nghĩa là Trình duyệt Cài đặt mặc định).

Bất kỳ ý tưởng?

Alohci

75.2K14 Huy hiệu vàng109 Huy hiệu bạc152 Huy hiệu đồng14 gold badges109 silver badges152 bronze badges

hỏi ngày 27 tháng 7 năm 2010 lúc 5:39Jul 27, 2010 at 5:39

Link Text

Bạn đã yêu cầu một liên kết trông giống như một nút, vì vậy hãy sử dụng một liên kết và một nút :-) Điều này sẽ lưu giữ kiểu nút trình duyệt mặc định. Nút tự nó không làm gì, nhưng nhấp vào nó kích hoạt liên kết cha của nó.

Thử nghiệm:

Link Text

Trakjohnson

1.6292 Huy hiệu vàng17 Huy hiệu bạc 30 Huy hiệu Đồng2 gold badges17 silver badges30 bronze badges

Đã trả lời ngày 27 tháng 7 năm 2010 lúc 8:09Jul 27, 2010 at 8:09

Edeveretedeverettedeverett

7.78832 Huy hiệu bạc28 Huy hiệu đồng32 silver badges28 bronze badges

7

Quan trọng:

Link Text

0 không bao giờ nên là một hậu duệ của

Link Text

1.

Link Text

0 should never be a descendent of

Link Text

1.

Hãy thử

Link Text

2 trong bất kỳ trình xác thực HTML nào như https://validator.w3.org và bạn sẽ gặp lỗi. Thực sự không có điểm nào trong việc sử dụng nút nếu bạn không sử dụng nút. Chỉ cần tạo kiểu

Link Text

1 với CSS để trông giống như một nút. Nếu bạn đang sử dụng một khung như Bootstrap, bạn có thể áp dụng (các) kiểu nút

Link Text

4,

Link Text

5, v.v.not using the button. Just style the

Link Text

1 with css to look like a button. If you're using a framework like Bootstrap, you could apply the button style(s)

Link Text

4,

Link Text

5 etc.

JSFIDDLE: Liên kết theo kiểu nút

.btnStack {
  font-family: Oswald;
  background-color: orange;
  color: #000;
  text-decoration: none;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
a.btnStack:hover {
  background-color: #000;
  color: #fff;
}

stackoverflow.com

Đã trả lời ngày 16 tháng 2 năm 2018 lúc 16:10Feb 16, 2018 at 16:10

joby-flickjoby-flickjoby-flick

1.7101 Huy hiệu vàng11 Huy hiệu bạc20 Huy hiệu đồng 201 gold badge11 silver badges20 bronze badges

Sử dụng JavaScript:

CSS page

Bạn luôn có thể tạo kiểu cho nút trong CSS Anyaways. Hy vọng nó đã giúp!

Chúc may mắn!

Đã trả lời ngày 3 tháng 11 năm 2017 lúc 7:10Nov 3, 2017 at 7:10

FreerangerfreerangerFreeranger

1031 Huy hiệu bạc10 Huy hiệu đồng1 silver badge10 bronze badges

1

Bạn có ba tùy chọn:

• Liên kết kiểu để trông giống như các nút bằng CSS.

  Chỉ cần nhìn vào các "thẻ" màu xanh nhạt dưới câu hỏi của bạn.

  Có thể, ngay cả để cho họ một vẻ ngoài chán nản khi nhấp (sử dụng các lớp giả như: Active), mà không có bất kỳ kịch bản nào. Rất nhiều trang web chính, chẳng hạn như Google, đang bắt đầu tạo các nút từ các kiểu CSS ngày nay, có kịch bản hay không.

• Đặt một yếu tố riêng biệt xung quanh mỗi một phần tử.

  Như bạn đã đề cập trong câu hỏi. Dễ dàng và chắc chắn sẽ hoạt động mà không có JavaScript (hoặc thậm chí CSS). Nhưng nó thêm một chút mã có thể trông không gọn gàng.

• Dựa vào JavaScript.

  Đó là những gì bạn nói bạn không muốn làm.

Đã trả lời ngày 27 tháng 7 năm 2010 lúc 5:49Jul 27, 2010 at 5:49

Thomasrutterthomasrutterthomasrutter

Huy hiệu vàng 111K2828 gold badges147 silver badges164 bronze badges

2

Dễ dàng hơn một chút và nó trông giống hệt nút trong biểu mẫu. Chỉ cần sử dụng đầu vào và bọc thẻ neo xung quanh nó.

Đã trả lời ngày 6 tháng 7 năm 2012 lúc 22:11Jul 6, 2012 at 22:11

JaredjaredJared

Huy hiệu đồng 1911 bronze badge

Đã trả lời ngày 16 tháng 3 năm 2020 lúc 19:24Mar 16, 2020 at 19:24

Nithya NithyaNithya

Phù hiệu bằng đồng 1722 bronze badges

3 cách dễ nhất IMHO là

1: Bạn tạo một hình ảnh của một nút và đặt một href xung quanh nó. (Không phải là một cách tốt, bạn mất linh hoạt và sẽ cung cấp rất nhiều khó khăn và vấn đề.)

2 (cái dễ nhất) -> jQuery

  $('button[type=submit] .default').click(function(){
     window.location = $(this).attr("someattribute");
     return false; //otherwise it will send a button submit to the server

   });  

3 (cũng dễ dàng nhưng tôi thích cái trước):

$fn.somefunction= function(url) {
    window.location = url;
};

Đã trả lời ngày 27 tháng 7 năm 2010 lúc 8:17Jul 27, 2010 at 8:17

NealvnealvNealv

6.7648 Huy hiệu vàng56 Huy hiệu bạc87 Huy hiệu Đồng8 gold badges56 silver badges87 bronze badges

4

Làm cách nào để tạo nút liên kết trong HTML và CSS?

Làm thế nào để bạn liên kết một nút trong HTML?

Tôi có thể thêm một nút có CSS không?

Làm thế nào để bạn liên kết CSS với HTML?