Thiết kế giao diện nút bấm pha lê bằng CSS
Bài viết này hướng dẫn cách tạo hiệu ứng nút bấm pha lê hoàn toàn bằng CSS, không sử dụng JavaScript. Chúng ta sẽ tìm hiểu các kỹ thuật áp dụng cho cả thẻ input và a, kết hợp với thuộc tính CSS3 hiện đại.
1. Tạo nút từ thẻ input
Đoạn mã HTML:
<input type="submit" value="Gửi"/>
<input type="button" value="Lưu"/>
<input type="reset" value="Làm lại">
CSS tương ứng:
input {
width: 120px;
height: 45px;
border: none;
background: url(button/btn.png);
font-weight: bold;
}
Ưu điểm: Đơn giản, dễ triển khai. Nhược điểm: Kích thước cố định, không tự động điều chỉnh theo nội dung.
2. Tạo nút từ thẻ liên kết
HTML mẫu:
<a href="#"><span>Nút chính</span></a>
CSS hiệu ứng:
a.btn {
display: inline-table;
width: 120px;
height: 45px;
line-height: 45px;
text-decoration: none;
padding-left: 20px;
background: url(button/btn_bg.png);
}
a.btn:hover {
background-position: 0 -90px;
}
a.btn span {
display: inline-table;
height: 45px;
padding-right: 20px;
color: #fff;
background: url(button/btn_bg.png) right -45px;
}
a.btn:hover span {
background-position: right -135px;
}
3. Áp dụng CSS3 hiện đại
HTML:
<a href="#" class="crystal">Nút pha lê</a>
CSS với border-radius:
.crystal {
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 25px;
background: url(button/css3_btn_bg.png);
border: 1px solid #3c8134;
border-radius: 8px;
color: #fff;
text-shadow: 1px 1px 2px #000;
}
.crystal:hover {
background-position: 0 -40px;
}
4. Ví dụ thực tế: Menu ngang
HTML:
<ul class="menu">
<li><a href="#" class="trang-chu"><span>Trang chủ</span></a></li>
<li><a href="#"><span>Dự án</span></a></li>
<li><a href="#"><span>Tin tức</span></a></li>
<li><a href="#"><span>Liên hệ</span></a></li>
</ul>
CSS định dạng:
.menu {
margin: 0;
padding: 0;
list-style: none;
height: 30px;
width: 600px;
border-bottom: 2px solid #21530C;
}
.menu li {
float: left;
}
.menu a {
display: inline-block;
height: 30px;
line-height: 30px;
padding-left: 12px;
margin-right: 15px;
text-decoration: none;
color: #000;
}
.menu a span {
display: inline-block;
height: 30px;
padding-right: 12px;
background: url(button/right.jpg) no-repeat right;
}
.menu a:hover {
background: url(button/left.jpg) no-repeat;
}
.menu a:hover span {
background-color: #21530C;
color: #fff;
}