Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Một số button với icon bằng css cho blog/website

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi TrollVL, 4/12/13.

Lượt xem: 9,648

  1. TrollVL Thành viên cấp 2

    Ơ bài viết này mình sẽ giới thiệu bộ button với icon tương ứng và 3 button của các mạng xã hội Facebook, Twitter và G+. Mời bạn xem các button demo bằng hình ảnh bên dưới hoặc click vào link sau để xem demo trực tiếp
    [​IMG]
    CSS
    Code:
    .
    	
    button {
    display:inline-block;
    white-space:nowrap;
    background-color:#ddd;
    background-image:-webkit-gradient(linear,left top,left bottom,from(#eee),to(#ccc));
    background-image:-webkit-linear-gradient(top,#eee,#ccc);
    background-image:-moz-linear-gradient(top,#eee,#ccc);
    background-image:-ms-linear-gradient(top,#eee,#ccc);
    background-image:-o-linear-gradient(top,#eee,#ccc);
    background-image:linear-gradient(top,#eee,#ccc);
    border:1px solid #777;
    padding:0 1.5em;
    margin:0.5em;
    font:bold 1em/2em Arial,Helvetica;
    text-decoration:none;
    color:#333;
    text-shadow:0 1px 0 rgba(255,255,255,.8);
    -moz-border-radius:.2em;
    -webkit-border-radius:.2em;
    border-radius:.2em;
    -moz-box-shadow:0 0 1px 1px rgba(255,255,255,.8) inset,0 1px 0 rgba(0,0,0,.3);
    -webkit-box-shadow:0 0 1px 1px rgba(255,255,255,.8) inset,0 1px 0 rgba(0,0,0,.3);
    box-shadow:0 0 1px 1px rgba(255,255,255,.8) inset,0 1px 0 rgba(0,0,0,.3);
    }
    .
    	
    button:hover {
    background-color:#eee;
    background-image:-webkit-gradient(linear,left top,left bottom,from(#fafafa),to(#ddd));
    background-image:-webkit-linear-gradient(top,#fafafa,#ddd);
    background-image:-moz-linear-gradient(top,#fafafa,#ddd);
    background-image:-ms-linear-gradient(top,#fafafa,#ddd);
    background-image:-o-linear-gradient(top,#fafafa,#ddd);
    background-image:linear-gradient(top,#fafafa,#ddd);
    }
    .
    	
    button:active {
    -moz-box-shadow:0 0 4px 2px rgba(0,0,0,.3) inset;
    -webkit-box-shadow:0 0 4px 2px rgba(0,0,0,.3) inset;
    box-shadow:0 0 4px 2px rgba(0,0,0,.3) inset;
    position:relative;
    top:1px;
    }
    .
    	
    button:focus {
    outline:0;
    background:#fafafa;
    }
    .
    	
    button:before {
    background:#ccc;
    background:rgba(0,0,0,.1);
    float:left;
    width:1em;
    text-align:center;
    font-size:1.5em;
    margin:0 1em 0 -1em;
    padding:0 .2em;
    -moz-box-shadow:1px 0 0 rgba(0,0,0,.5),2px 0 0 rgba(255,255,255,.5);
    -webkit-box-shadow:1px 0 0 rgba(0,0,0,.5),2px 0 0 rgba(255,255,255,.5);
    box-shadow:1px 0 0 rgba(0,0,0,.5),2px 0 0 rgba(255,255,255,.5);
    -moz-border-radius:.15em 0 0 .15em;
    -webkit-border-radius:.15em 0 0 .15em;
    border-radius:.15em 0 0 .15em;
    pointer-events:none;
    }
    
    	
    button.
    	
    button,input.
    	
    button {
    cursor:pointer;
    overflow:visible;
    }
    
    	
    button::-moz-focus-inner {
    border:0;
    padding:0;
    }
    input::-moz-focus-inner {padding:.4em;} .
    	
    button[disabled],.
    	
    button[disabled]:hover,.
    	
    button.disabled,.
    	
    button.disabled:hover {
    background:#eee;
    color:#aaa;
    border-color:#aaa;
    cursor:default;
    text-shadow:none;
    position:static;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
    }
    .add:before {content:"\271A";}
    .edit:before {content:"\270E";}
    .delete:before {content:"\2718";}
    .save:before {content:"\2714";}
    .email:before {content:"\2709";}
    .like:before {content:"\2764";}
    .next:before {content:"\279C";}
    .star:before {content:"\2605";}
    .spark:before {content:"\2737";}
    .play:before {content:"\25B6";}
     
    /* 
    	
    Button Facebook & Twitter */
     
    .tw,.fb,.gl,.tw:hover,.fb:hover,.gl:hover {
    background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,.5)),to(rgba(255,255,255,0)));
    background-image:-webkit-linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,0));
    background-image:-moz-linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,0));
    background-image:-ms-linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,0));
    background-image:-o-linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,0));
    background-image:linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,0));
    }
    .tw,.tw:focus {background-color:#88E1E6;}
    .fb,.fb:focus {
    background-color:#3C5A98;
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,.4);
    }
    .gl,.gl:focus {
    background-color:#ff8000;
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,.4);
    }
    .tw:hover {background-color:#b1f0f3;}
    .fb:hover {background-color:#879bc3;}
    .gl:hover {background-color:#ff5000;}
    .tw:before {
    content:"t";
    background:#91cfd3;
    background:rgba(0,0,0,.1);
    color:#fff;
    font-family:verdana;
    text-shadow:0 1px 0 rgba(0,0,0,.4);
    }
    .fb:before {
    content:"f";
    background:#4467ac;
    background:rgba(0,0,0,.1);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,.4);
    }
    .gl:before {
    content:"G";
    background:#ff6000;
    background:rgba(0,0,0,.1);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,.4);
    }
    HTML
    Code:
    <a href="" class="
    	
    button add">Add</a>
    <a href="" class="
    	
    button edit">Edit</a>
    <a href="" class="
    	
    button delete">Delete</a>
    <a href="" class="
    	
    button save">Save</a>
    <a href="" class="
    	
    button email">Send email</a>
    <a href="" class="
    	
    button like">Like</a>
    <a href="" class="
    	
    button next">Next</a>
    <a href="" class="
    	
    button star">Favourite</a>
    <a href="" class="
    	
    button spark">Spark</a>
    <a href="" class="
    	
    button play">Play</a>
    HTML cho các button mạng xã hội
    Code:
    <a href="http://twitter.com/Your-Twitter" class="
    	
    button tw">Follow me</a>
    <a href="http://www.facebook.com/Your-Facebook" class="
    	
    button fb">Become a fan</a>
    <a href="https://plus.google.com/Your-profil-G+" class="
    	
    button gl">Add me google +</a>

    ...
    Phạm Hữu Dư thích bài viết này

Ủng hộ diễn đàn