Để biến URL thành nút có thể nhấp bằng CSS, bạn có thể tạo kiểu cho <a> phần tử neo ( ) trông giống như một nút. Đây là hướng dẫn từng bước:
- HTML : Tạo
<a>phần tử neo ( ) vớihrefthuộc tính chứa URL của bạn và thêm một số văn bản vào đó. Cung cấp cho nó một lớp hoặc ID để tạo kiểu.
- html
- <a href=”https://www.example.com” class=”button-link”>Visit Example.com</a>
- CSS: Tạo kiểu cho phần tử neo để làm cho nó trông giống như một nút. Bạn có thể sử dụng CSS để xác định giao diện của nó, chẳng hạn như đặt màu nền, phần đệm, đường viền và kiểu văn bản. Đây là một ví dụ cơ bản:
- css
- button-link {
- display: inline-block;
- padding: 10px 20px;
- background-color: #007bff;
- color: #fff;
- text-decoration: none;
- border: none;
- border-radius: 5px;
- cursor: pointer;
- transition: background-color 0.3s ease;
- }
- .button-link:hover {
- background-color: #0056b3;
- }
Mã CSS này tạo ra giao diện giống như nút cho phần tử neo. Bạn có thể tùy chỉnh các kiểu (ví dụ: màu sắc, phần đệm, phông chữ) để phù hợp với sở thích thiết kế của bạn.
- Tùy chọn: Nếu bạn muốn mở URL trong tab mới khi nhấp vào nút, bạn có thể thêm thuộc
target="_blank"tính vào<a>thành phần:
- html
- <a href=”https://www.example.com” class=”button-link” target=”_blank”>Visit Example.com</a>
Bây giờ, khi người dùng nhấp vào nút, nó sẽ mở URL trong tab trình duyệt mới.
Phương pháp này cho phép bạn tạo một nút có thể nhấp trông giống như một nút nhưng được triển khai bằng cách sử dụng phần tử neo, giúp nút này có thể truy cập và thân thiện với SEO.
