"Tao nút bo tròn góc bằng CSS"

(Traidatmui.com) – Trước đây mình đã có giới thiệu đến các bạn một thủ thuật để tạo nút dạng hình chữ nhật, tức có 4 góc nhọn. Hôm nay cũng là cách để tạo nút bằng CSS, mình xin chia sẻ cùng các bạn cách để làm nút có 4 góc bo tròn. Thủ thuật này sẽ dùng hình ảnh bo tròn góc sẳn để làm nút, vì thế để làm thủ thuật này bạn cần có ảnh bo tròn 4 góc sau đó cắt ảnh ra như hình mẫu. Chúng ta đi ngay vào thủ thuật.

Để bắt đầu thủ thuật bạn cần chuẩn bị cho mình những loại hình ảnh như bên dưới, bạn có thể tự tạo hoặc sử dụng hình ảnh mẩu bên dưới.






☼ Bây giờ tiến hành thủ thuật

1. Đăng nhập blogspot
2. Vào bố cục chọn sửa HTML (không cần chọn mở rộng)
3. Chèn code bên dưới vào trước thẻ ]]></b:skin>
a.roundbutton {
background: transparent url('http://lh6.ggpht.com/_BTztXRwC9ik/TBHynXiD4mI/AAAAAAAACbc/ULHP5HC8qIk/roundedge-red-left.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px Arial;
line-height: 22px;
padding-left: 8px;
text-decoration: none;

}

a:link.roundbutton {
color: white; /*màu của text*/
}
a:visited.roundbutton {
color: #00ff66; /*màu của text sau khi click chuột*/
}
a:hover.roundbutton {
text-decoration: underline;
color:#33ffff; /*màu của text khi rê chuột vào nút*/
}

a.roundbutton span {
background: transparent url('http://lh6.ggpht.com/_BTztXRwC9ik/TBHynZVPCII/AAAAAAAACbg/AsfBSZmnqh0/roundedge-red-right.gif') no-repeat top right;
display: block;
padding: 4px 10px 4px 2px;
}

Hướng dẫn chỉnh sửa code: Bạn hãy dựa vào chú thích để chỉnh sửa code, sau khi chỉnh sửa xong nhớ xóa đi các dòng chú thích đó.

Lưu ý: thay hai đường link màu xanh dương đó là (http://lh6.ggpht.com/_BTztXRwC9ik/TBHynZVPCII/AAAAAAAACbg/AsfBSZmnqh0/roundedge-red-right.gif) thành hai ảnh nền mà bạn chọn. Nhớ là phải thay đúng thứ tự ảnh mới hiển thị đúng được, tức là link đầu tiên là ảnh có 2 góc bo tròn bên trái, link thứ 2 là ảnh có 2 góc bo tròn bên phải.

4. Save template lại

Bây giờ là việc sử dụng nút, để sử dụng nút tròn này bạn hãy sử dụng code bên dưới cho link trên blog.
<a class="roundbutton" href="http://www.traidatmui.com/"><span>TRAIDATMUI.COM</span></a>

Chúc bạn thành công

Xem khác cùng chủ đề

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang