Hot Post

CSS một số kiểu Button đẹp cho Blogger

5/21/2015 A+ a-
Chia sẻ Facebook Blog This! Chia sẻ Email
Bình luận
0

Dưới đây là một số mẫu của nút bấm bằng CSS. Bạn chỉ cần copy đoạn code của nút bất kỳ và sử dụng nó trong dự án của mình.


1. Clean Button

 .clean-btn {
    background: #e2e2e2; /* Old browsers */
    background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
    background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
    -webkit-border-radius:100px;
    -moz-border-radius:100px;
    border-radius:100px;
    border:1px solid #dcdcdc;
    margin:5px;
    display:inline-block;
    color:#444;
        font-family:verdana,georgia, helvetica;
    font-size:16px;
    font-weight:bold;
    font-style:normal;
    height:45px;
    line-height:45px;
    padding:3px 17px 3px 17px;
    text-decoration:none;
    text-align:center;
    position: relative;
}
.clean-btn:hover
{
color:#444;
}

2. Yellow Button

 .yellow-btn {
  display:inline-block;
  background-color: #ffcb08;
  border: 1px solid #815627;
  border-radius:5px;
  box-shadow: 0 3px 0 #815627,0 6px 4px -2px rgba(0,0,0,0.3);
  color: #333;
  font-family: 'Gotham A', Verdana, Arial, sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 24px;
  letter-spacing: .5px;
  padding: 15px 35px;
  cursor: pointer;
  text-decoration:none !important;
}
.yellow-btn:hover{
    color:#333;
}

3. Border Button

 .border-btn {
    background:none;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    border:2px solid #e74c3c;
    margin:5px;
    display:inline-block;
    color:#e74c3c;
        font-family:verdana,georgia, helvetica;
    font-size:16px;
    font-weight:bold;
    font-style:normal;
    height:40px;
    line-height:40px;
    padding:3px 25px 3px 25px;
    text-decoration:none;
    text-align:center;
    position: relative;
}
.border-btn:hover{
    color:#fff;
}

4. Plain CSS Button

 .pln-btn {
    
    background:#f55a3e;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    border:1px solid #e74c3c;
    border-bottom:2px solid #e74c3c;
    margin:5px;
    display:inline-block;
    color:#fff;
        font-family:'Gotham A', verdana,georgia, helvetica;
    font-size:16px;
    font-weight:bold;
    font-style:normal;
    height:40px;
    line-height:40px;
    padding:3px 25px 3px 25px;
    text-decoration:none;
    text-align:center;
    position: relative;
}
.pln-btn:hover{
    color:#fff;
}

5. Pressable CSS Buttons

 .press-btn {
    background-color: #54adea;
    border-radius: 50px;
    box-shadow: 0 0 0 1px #54adea inset, 0 0 0 2px rgba(255,255,255, 0.15) inset, 0 8px 0 0 #3b81b2,0 8px 0 1px rgba(0,0,0, 0.4), 0 8px 8px 1px rgba(0,0,0, 0.5);
    color: #fff;
    display: inline-block;
    font-family: verdana, Arial, sans-serif;
    font-size: 24px;
    font-weight: bold;
    height: 60px;
    line-height: 60px;
    margin: 30px 0 10px;
    position: relative;
    text-align: center;
    text-shadow: 0 -1px 1px rgba(175, 49, 95, .7);
    text-decoration: none !important;
    top: 0;
    width: 200px;
    transition:.20s;
}
.press-btn:hover, .press-btn:focus {
    background-color: #54adea;
    text-shadow: 0 -1px 1px rgba(2, 2, 2, .9), 0 0 5px rgba(255, 255, 255, .8);
    color:#fff;
}
.press-btn:active {
    box-shadow: 0 0 0 1px #444 inset, 0 0 0 2px rgba(255,255,255, 0.15) inset, 0 0 0 1px rgba(0,0,0, 0.4);
    transform:translate(0,8px);
    -ms-transform: translate(0,8px); 
    -webkit-transform: translate(0,8px); 
}

6. Glossy Button

 .glossy-btn
{
    background: #cb60b3; /* Old browsers */
    background: -moz-linear-gradient(top, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cb60b3), color-stop(50%,#c146a1), color-stop(51%,#a80077), color-stop(100%,#db36a4)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* IE10+ */
    background: linear-gradient(to bottom, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#db36a4',GradientType=0 ); /* IE6-9 */
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    border:1px solid #cb60b3;
    margin:5px;
    display:inline-block;
    color:#fff;
        font-family:verdana,georgia, helvetica;
    font-size:20px;
    font-weight:bold;
    font-style:normal;
    height:35px;
    line-height:35px;
    padding:3px 17px 3px 17px;
    text-decoration:none;
    text-align:center;
    position: relative;
    }
.glossy-btn:hover
{
    color:#fff;
}

7. Android Theme

 .droid-btn {
    
    background:#74d600;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    border:1px solid #6bb120;
    margin:5px;
    display:inline-block;
    color:#fff;
        font-family:verdana,georgia, helvetica;
    font-size:16px;
    font-weight:bold;
    font-style:normal;
    height:35px;
    line-height:35px;
    padding:3px 17px 3px 17px;
    text-decoration:none;
    text-align:center;
    position: relative;
}
.droid-btn:hover
{
    color:#fff;
}

8. Circular Button

 .circle-btn {
    background: #ff3019; /* Old browsers */
    background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
    -webkit-border-radius:100px;
    -moz-border-radius:100px;
    border-radius:100px;
    border:2px solid #e74c3c;
    margin:5px;
    display:inline-block;
    color:#fff;
        font-family:verdana,georgia, helvetica;
    font-size:16px;
    font-weight:bold;
    font-style:normal;
    height:100px;
    line-height:100px;
    width:95px;
    padding:3px 7px 3px 7px;
    text-decoration:none;
    text-align:center;
    position: relative;
}
.circle-btn:hover{
    color:#fff;
}

9. Dark Theme

 .dark-btn {
    background: #45484d; /* Old browsers */
    background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #45484d 0%,#000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #45484d 0%,#000000 100%); /* IE10+ */
    background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    border:1px solid #444;
    margin:5px;
    display:inline-block;
    color:#fff;
        font-family:verdana,georgia, helvetica;
    font-size:16px;
    font-weight:bold;
    font-style:normal;
    height:45px;
    line-height:45px;
    padding:3px 30px 3px 30px;
    text-decoration:none;
    text-align:center;
    position: relative;
}
.dark-btn:hover
{
color:#fff;
}

10. Girlish buttons

 .girlish-btn
{
    background:#ff77aa;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    border-bottom:2px solid #ff5588;
    margin:5px;
    display:inline-block;
    color:#fff;
        font-family:verdana,georgia, helvetica;
    font-size:16px;
    font-weight:bold;
    font-style:normal;
    height:40px;
    line-height:40px;
    padding:3px 50px 3px 50px;
    text-decoration:none;
    text-align:center;
    position: relative;
}
.girlish-btn:hover
{
color:#fff;
}


Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips
Iris Tips

Đăng ký nhận tin khuyến mãi, thủ thuật mới

Mẹo nhỏ khi bình luận
  • - Để viết chữ in đậm hãy sử dụng thẻ <b>chữ in đậm</b>
  • - Để viết chữ in nghiêng hãy sử dụng thẻ <i>chữ in nghiêng</i>
  • - Để viết code hãy sử dụng công cụ Conversion ở bên dưới để mã hóa và sau đó dán vào khung bình luận.
  • - Để chèn hình ảnh, video chỉ cần dán link trực tiếp của hình ảnh hoặc video vào khung bình luận (hỗ trợ: jpg, gif, png, bmp, Youtube).
  • - Bạn có thể upload hình ảnh, tập tin trực tiếp từ máy tính bằng cách sử dụng công cụ Up ảnh hoặc Up file ở bên dưới.
  • - Bạn có thể check vào ô Notify me ở khung nhận xét để nhận thông báo qua email khi ai đó trả lời bình luận của bạn.

0 Response to "CSS một số kiểu Button đẹp cho Blogger"

Đăng nhập bằng Google


Trở thành người đầu tiên bình luận cho bài viết này!

Đăng ký: Đăng Nhận xét (Atom)