Bài viết sau mình sẽ hướng dẫn bạn cách chèn link vào button trong html đơn giản nhất. Việc sử dụng link trong quá trình SEO website là rất quan trọng. Việc chèn link vào button trong html bạn có thể dùng cặp thẻ button hoặc dùng cặp thẻ link a. Nếu bạn chỉ cần đi link đến một link khác. Thì bạn dùng thẻ a có thuộc tính href đến link sẽ tốt nhất. Bạn có thể CSS cho thẻ a này giống 1 nút button. Nếu bạn muốn gửi dữ liệu dạng form đi thì bạn nên dùng thẻ button có thuộc tình type=submit. Sau đây mình sẽ hướng dẫn bạn các cách chèn link vào button trong html đơn giản nhất. Bài viết này thuốc chuyên mục WordPress Development

Chèn link vào button trong html với form

Việc chèn link vào button trong html dạng form sẽ giúp bạn gửi dữ liệu của tất cả các trường trong form. Bạn đặt link để chuyển đến trang khác qua thuộc tính action trong form. Bạn chỉ nên dùng form với những mục đích rõ ràng như để lấy và xử lý dữ liệu của form. Nếu chỉ dụng với mục đích đi link đến một trang khác thì nó không phù hợp.

<form action="https://chuanseoweb.com">
    <button class="csw-btn-button" type="submit">Gửi Form</button>
</form>

Bạn có thể thêm đoạn code css sau đển Button hiển thị đẹp hơn chút. Và khi hover qua có hình bàn tay.

.csw-btn-button {
  cursor: pointer;
  font-size: 16px;
  padding: 10px 35px;
  color: #ffffff !important;
  border-radius: 5px;
  background: #9B6A1D;
  border: 1px solid #9B6A1D;
  transition: 0.4s;
}
.csw-btn-button:hover {
  background: #292929;
}

Chèn link vào button trong html với thẻ a

Nếu bạn muốn tạo một nút đơn giản là chỉ chuyển sang link khác thì bạn nên dùng thẻ a. Bởi vì nó sẽ tốt cho SEO hơn google sẽ tìm các thẻ a trên website của bạn để xem các liên kết của bạn trỏ đến đâu. Thông qua thuộc tính ahef này sẽ giúp bạn tạo một liên kết. Bạn chỉ cần css một chút để thẻ a này sẽ trông giống như một button. Sẽ rất tốt cho SEO và bạn cũng dễ dàng sử dụng các thuộc tính như nofolow, target.

<a href="https://chuanseoweb.com/" class="csw-btn-button" rel="nofollow" target="_blank" >Click tại đây</a>

• Thuộc tính href bạn đặt liên kết vào đây để khi người dùng click vào chữ “Click tại đây” sẽ chuyển đến link này.
• Thuộc tính rel nếu bạn không thêm vào thì mặc định sẽ là dofollow, nghĩa là bot của google sẽ theo link đó. Nếu bạn để rel=nofollow thì bot của google sẽ không đi theo link đó để lấy dữ liệu.
• Thuộc tính targer mặc định của thẻ a nếu bạn không thêm vào là _self. Sẽ không mở một tab mới khi click vào link. Với target = _blank thì trình duyệt sẽ mở một tab mới khi click vào link

Tiếp theo bạn cần thêm đoạn code css sau để link trên hiển thị như một nút button:

.csw-btn-button {
  cursor: pointer;
  font-size: 16px;
  padding: 10px 35px;
  color: #ffffff !important;
  border-radius: 5px;
  background: #9B6A1D;
  border: 1px solid #9B6A1D;
  transition: 0.4s;
}
.csw-btn-button:hover {
  background: #292929;
}

Chèn link vào button với javascript

Ngoài 2 cách trên bạn có thể thêm thẳng đoạn một đoạn javascript vào button để nó chuyển hướng tới link đó luôn. Bạn sử dụng đoạn code sau:

<button type="button" onclick="location.href='https://chuanseoweb.com/';" class="csw-btn-button" >Click tại đây</button>

Bạn thêm link của bạn vào sau “location.href= ” . Và bạn cần thêm code css giống bên trên để nó hiển thị được đẹp hơn. Bạn copy nguyên đoạn code css trên vào nhé. Vì mình dùng chung class nên bạn có thể dùng chung được.

Kết Luận

Qua bài viết trên Chuẩn Seo Web đã hướng dẫn bạn 3 cách chèn link vào button trong html đơn giản nhất. Mình hy vọng sẽ giúp ích cho bạn. Nếu có thắc mắc gì bạn vui lòng để lại bình luận bên dưới. Cám ơn bạn đã theo dõi bài viết.