Tạo nút button Demo và Download đẹp cho Blogger

TIEUTHUYET.TOP - Đọc truyện trên điện thoại

NoiDau.Net - Đọc Truyện Online

- Phòng Chat Thảo Luận WapMaster

Home › Blogger › Share

Tìm kiếm

Tạo nút button Demo và Download đẹp cho Blogger

Admin

08-08-2017

Tạo nút button Demo và Download đẹp cho Blogger

Button là nút bấm mà bạn có thể tìm thấy nó trong cuồc sống hàng ngày như bàn phím , công tắc … và web cũng vậy Button Demo và Download chính là nút bấm .
Ở bài này thì nó chính là nút xem trước và tải về cho các dạng website chia sẻ mã nguồn …

Bắt tay luôn vậy

Tìm thẻ và thêm đoạn dưới đây vào trước nó

.buttonx{
float:left;
list-style:none;
text-align:center;
width: 100%;
margin:5px 0;
padding:0;
font-size:14px;
clear:both;
}
.buttonx ul {
margin:0;padding:0
}
.buttonx li{
display:inline;
margin:0;
padding:0
}
.demo {
border: none;border-radius:2px;
padding: 8px 19px !important;
background: #E55E48;
color: #fff !important;
text-align: center;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}
.download {
border: none;border-radius:2px;
padding: 8px 19px !important;
background: #2ecc71;
color: #fff !important;
text-align: center;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}
.demo:hover {
background: #454242;
text-decoration:none
}
.download:hover {
background: #454242;
text-decoration:none
}
.download:before {
content : "\f019";
font-family : FontAwesome;
font-weight : normal;
padding :11px 11px 9px !important;
background : #27ae60;
margin-left : -19px;
margin-right : 6px;
border-radius : 3px 0 0 3px;
font-size : 16px;
}
.demo:before {
content : "\f06e";
font-family : FontAwesome;
font-weight : normal;
padding : 11px 11px 9px !important;
background : #c0392b;
margin-left : -19px;
margin-right : 6px;
border-radius : 3px 0 0 3px;
font-size : 16px;
}

Copy Code:

.buttonx{
float:left;
list-style:none;
text-align:center;
width: 100%;
margin:5px 0;
padding:0;
font-size:14px;
clear:both;
}
.buttonx ul {
margin:0;padding:0
}
.buttonx li{
display:inline;
margin:0;
padding:0
}
.demo {
border: none;border-radius:2px;
padding: 8px 19px !important;
background: #E55E48;
color: #fff !important;
text-align: center;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}
.download {
border: none;border-radius:2px;
padding: 8px 19px !important;
background: #2ecc71;
color: #fff !important;
text-align: center;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}
.demo:hover {
background: #454242;
text-decoration:none
}
.download:hover {
background: #454242;
text-decoration:none
}
.download:before {
content : "\f019";
font-family : FontAwesome;
font-weight : normal;
padding :11px 11px 9px !important;
background : #27ae60;
margin-left : -19px;
margin-right : 6px;
border-radius : 3px 0 0 3px;
font-size : 16px;
}
.demo:before {
content : "\f06e";
font-family : FontAwesome;
font-weight : normal;
padding : 11px 11px 9px !important;
background : #c0392b;
margin-left : -19px;
margin-right : 6px;
border-radius : 3px 0 0 3px;
font-size : 16px;
}

Save lại . Khi post bài thì chuyển sang HTML post như sau

<div style="text-align: center;"><ul class="buttonx"><li><a class="demo" href="https://trungsky.me" target="_blank">Demo</a></li><li><a class="download" href="https://trungsky.pro" target="_blank">Download</a></li></ul></div> <div class="clear"></div>

Copy Code:

Nhớ thay link lại cho phù hợp

Hướng dẫn Post bài

Bạn có thể tùy chỉnh màu cho hợp với Theme nhé :). Chúc các bạn thành công !

- Share:
BBCode:

Link:

Cùng chuyên mục

Template ToiXemTV Cực Đẹp Dành Cho Blogspot

Template Blogspot Code Giới Thiệu Cá Nhân Đẹp 2017

Trang Chủ

BLOGCODE.HEXAT.COM