Cách làm nút bấm bo tròn đơn giản cho web bằng HTML

Bạn dễ dàng tạo nút bấm hình tròn bằng cách tạo kiểu nút bấm bằng HTML thông thường. Cách thực hiện không khó nếu bạn đã có kiến thức về thuộc tính CSS. Dưới đây là chi tiết quá trình tạo nút bấm tròn bằng HTML.

Cách tạo nút bấm hình tròn

Bạn có thể tạo các nút bấm hình tròn CSS bằng cách xây dựng một nút bấm HTML và thiết lập thuộc tính border-radius, height và width. Ngoài ra, bạn còn áp dụng được cả những thuộc tính khác như đường viền, màu sắc, màu nền… để thiết kế nút bấm tròn như ý muốn.

Các bước tạo nút tròn như sau:

1. Tạo một nút bấm HTML.
2. Tạo một class CSS như myButton.
3. Thêm thuộc tính sau vào class CSS “myButton".
4. Đặt bán kính đường viền sang 50%.
5. Xác định cùng một giá trị cho các thuộc tính chiều cao và rộng.
6. Thiết lập thuộc tính đường viền, màu nền, màu sắc và căn lề.
7. Thêm thuộc tính để đáp ứng các yêu cầu thiết kế nút bấm hình tròn.
8. Áp dụng class myButton vào nút bấm HTML được tạo ban đầu.

Ví dụ mẫu code tạo nút bấm hình tròn

Giả sử bạn muốn tạo một nút bấm hình tròn màu đỏ với đường viền màu đen đậm hiển thị Stop!. Ngoài ra, bạn cũng muốn nút bấm có chiều cao và rộng đều là 100px. Trong trường hợp này, hãy sao chép và dán code mẫu sau vào cửa sổ trình duyệt:

Code CSS

.myButton{
border-radius: 50%;
height: 100px;
width: 100px;
background-color: red;
border: black solid 2px;
color: Black;
font-weight: bolder;
}

Code nút bấm HTML

<button class=”myButton”>Stop!</button>

Cách chuyển đổi Anchor thành một nút bấm hình tròn

Bạn có thể chuyển đổi anchor thành một nút bấm hình tròn bằng cách thiết lập thuộc tính hiển thị giống nhau thành khối hoặc inline-block. Tiếp theo, bạn sẽ cần xác định các giá trị cho chiều cao, rộng và bán kính đường viền, màu nền và thuộc tính đường viền như hình bên dưới.

Khối code tạo nút bấm tròn ngoài một link

Giả sử bạn muốn chuyển hướng khán giả tới một bài đăng nào đó từ trang chủ. Thế nhưng bạn không muốn tạo anchor text, thay vào đó là một nút bấm tròn nhỏ để triển khai tác vụ mong muốn. Trường hợp này bạn cần tạo một thẻ anchor và xác định link hay URL của bài viết trong thuộc tính href. Tiếp theo, bạn sẽ tạo một class CSS cho thẻ anchor mà thiết lập màn hình hiện khối và gắn giá trị cho các thuộc tính chiều cao, rộng, đường viền và bán kính đường viền.

Cuối cùng, bạn áp dụng class được cung cấp với tag anchor như được mô tả trong tập lệnh sau:

Code CSS

.anchorToCircle {
display: block;
height: 50px;
width: 50px;
border-radius: 50%;
border: darkred 2px ridge;
background-color: orangered;
}

Code HTML Anchor

<a class=”anchorToCircle” href=”#”></a>

Trên đây là một số cách tạo nút bấm tròn bằng HTML. Hi vọng bài viết hữu ích với các bạn.