[HTML/CSS] Xây dựng giao diện mẫu cho button 01

Thảo luận trong 'HTML và CSS' bắt đầu bởi Trần Văn Cường, 4/7/16.

  1. Trần Văn Cường

    Trần Văn Cường I love CNTT Thành viên BQT Thành viên BQT

    Tham gia ngày:
    8/11/15
    Bài viết:
    3,693
    Đã được thích:
    43
    Điểm thành tích:
    48
    Giới tính:
    Nam
    Nghề nghiệp:
    Sinh Viên
    Nơi ở:
    Quảng Ninh thân yêu!
    Web:

    Đây là giao diện mẫu được thiết kế sẵn bởi Admin và có sự hướng dẫn của ZendVN.

    Mục đích: Để chia sẻ cho các bạn và phục vụ dịch vụ thiết kế website của mình sau này.

    Đây là giao diện button 01:

    button.JPG
    Sau khi rê chuột vào button:

    button-2.png

    Xem DEMO

    Đây là CODE html các bạn chỉnh sửa cho hợp lý nhé. Sau này bạn không cần phải thiết kế lại button dạng này nữa. :D

    HTML:
    Select All
    <!doctype html> <html> <head> <meta charset="utf-8"> <title>Button 01</title> <style type="text/css"> * { margin: 0px; padding: 0px; } .block { width: 300px; border: 2px solid red; margin: 30px auto; text-align: center; padding: 10px; } .btn-link { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 20px; color:#FFFFFF; text-decoration: none; display:inline-block; border: 1px solid #000000; padding: 1px; background-color: yellow; } .btn-link span { display: block; background: #699; padding: 4px 15px; } .btn-link:hover { border:1px solid red; color:#FFFD00; } .btn-link:hover span { background-color:#009203; } </style> </head> <body> <div class="block"> <a class="btn-link" href="#"> <span>Hello Word</span> </a> </div> </body> </html>
     

    Bình Luận Bằng Facebook

    data-href="https://cnttqn.com/threads/html-css-xay-dung-giao-dien-mau-cho-button-01.2319.html"