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

Thảo luận trong 'HTML và CSS' bắt đầu bởi Trần Văn Cường, 5/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 02

    button-02.JPG

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

    button-02-hover.JPG

    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.

    CODE:
    Select All
    <!doctype html>
    <
    html>
    <
    head>
    <
    meta charset="utf-8">
    <
    title>Button 02</title>
    <
    style type="text/css">
    *
    {
         
    margin0px;
        
    padding0px;
    }
    .
    block
    {
        
    width300px;
        
    border2px solid red;
        
    margin30px auto;
        
    text-aligncenter;
        
    padding10px;
    }
    .
    btn-link
    {
        
    font-familyGotham"Helvetica Neue"HelveticaArialsans-serif;
        
    font-size20px;
        
    color:#FFFFFF;
        
    text-decorationnone;
        
    display:inline-block;
        
    border1px solid #eee;
        
    border-color#eee #DEDEDE #DEDEDE #eee;
        
    background-color:#699;
      
    }
    .
    btn-link span
    {
        
    displayblock;
        
    background#699;
        
    padding4px 15px;
        
    backgroundurl(http://cnttqn.com/lap-trinh-web/images/apply.png) left center no-repeat #699;
        
    padding-left28px;
        
    margin-left5px;
        
    padding5px 10px 4px 20px;
    }
    .
    btn-link:hover
    {
        
    background-color#00C91D;
    }
    .
    btn-link:hover span
    {
    backgroundurl(http://cnttqn.com/lap-trinh-web/images/apply-hover.png) left center no-repeat #00C91D;
    }
        </
    style>
    </
    head>

    <
    body>
    <
    div class="block">
    <
    class="btn-link" href="#">
    <
    span>Hello Word</span>
    </
    a>
    </
    div>
    </
    body>
    </
    html>
    DEMO 2
     

    Bình Luận Bằng Facebook

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