Thêm 1 cách tạo button cho forumotion
Diễn đàn Chiến Sĩ Trẻ Việt Nam

Nơi giao lưu cho các đ/c và các bạn đang công tác hoặc yêu mến lực lượng Vũ trang Nhân dân Việt Nam


    Thêm 1 cách tạo button cho forumotion

    yeunanghoihoa
    yeunanghoihoa
    Thượng sĩ
    Thượng sĩ

    Tổng số bài gửi : 343
    Tiền của bạn (VND) : 991
    Thank : 26
    Join date : 21/05/2011
    Age : 38
    Đến từ : Tp.HCM

    default Thêm 1 cách tạo button cho forumotion

    Bài gửi by yeunanghoihoa Sat Jun 16, 2012 7:51 pm

    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...


      Diễn đàn Chiến Sĩ Trẻ Việt Nam

      Trân trọng cảm ơn những Đồng chí đã đóng góp cho Diễn đàn:
      Ban Quản Trị: Nguyễn Tri Thức, Nguyễn Thành Long, Nguyễn Thụy Lan Vy
      Email:chiensitrevietnam@gmail.com
      Giấy phép số 268/GP-BTTT, Cục quản lí PTTH & TTĐT (Bộ TTTT) cấp
      ® Không sao chép thông tin từ Forum này khi chưa có sự đồng ý bằng văn bản của Ban Quản trị Diễn đàn Chiến Sĩ Trẻ Việt Nam.
      © 2012chiensitre. All Rights Reserved
      Hôm nay: Mon Nov 28, 2022 9:28 pm