Vilkenv Hiếu đã viết:Chào mọi người :-h
Lần trước mình đã đăng một bài hướng dẫn cách tạo 1 button đơn giản với 3 hiệu ứng CSS. Còn lần này, mình cũng hướng dẫn cách bạn tạo 1 kiểu button mới nhưng chỉ sử dụng 2 hiệu ứng CSS và còn dễ dàng hơn lần trước nữa. Và đây là demo:
Còn bây giờ thì chúng ta hãy thực hành làm demo trước khi đưa vào sử dụng nhé. Cũng như lần trước, lần này mình nhập thẻ class của button này là "buttonx".Code:
.buttonx {
width:auto;/* Kích thước button */
font-weight:bold; /* Chữ in đậm */
color:#FFF!important; /* Màu chữ */
background-color:#ccc; /* Nền button */
padding:4.5px 9px;/* Vị trí chữ trong button */
border-bottom: 2px solid #525252;/* Màu viền dưới button */
border-right: 2px solid #525252;/* Màu viền phải button */
border-top: 2px solid #999;/* Màu viền trên button */
border-left: 2px solid #999;/* Màu viền trái button */
}
.buttonx:active {
border-bottom: 2px solid #999;/* Màu viền dưới button */
border-right: 2px solid #999;/* Màu viền phải button */
border-top: 2px solid #525252;/* Màu viền trên button */
border-left: 2px solid #525252;/* Màu viền trái button */
}
Và thêm đoạn HTML sau vào chỗ muốn hiển thị button thử nghiệm:Code:
<div class="buttonx"> Demo </div>
Trong thẻ CSS trên thì:Code:
buttonx có giá trị hiển thị khi chúng ta chưa sử dụng tác vụCode:
buttonx:active có giá trị hiển thị khi chúng ta click vào button
Mình đã chú thích từng hiệu ứng trong thẻ css để các bạn có thể làm dễ dàng rồi đó nhé.
Lưu ý:
- Màu viền dưới button và màu viền phải button phải luôn có màu cùng màu giống nhau.
- Màu viền trên button và màu viền trái button phải luôn có màu cùng màu giống nhau.
- Nếu muốn tạo button có màu theo ý thích thì bạn cần phải chỉnh sửa màu cho phù hợp bạn nhé.
Ghi chú: Khi thấy button đã theo ý muốn của mình rồi và muốn đưa vào sử dụng cho forum thì cần thay như sau:Code:
.buttonx thay bằng .button,.mainoption,input[type="submit"],input[type="button"],input[type="reset"]Code:
.buttonx:active thay bằng .button:active,.mainoption:active,input[type="submit"]:active,input[type="button"]:active,input[type="reset"]:active
Bạn nào làm thành công thì up lên cho mọi người xem thành quả nha...
