Buttons\
Tool For Blogger
2:27 PM
Công cụ tạo button CSS3 cực đỉnh
Tool này được tác giả MKR viết ra nhằm phục vụ cho những người yêu thích thiết kế website/blog tạo những button CSS3 theo ý muốn nhanh và tiện lợi nhất. Nay mình xin được chia sẻ đến độc giả của Troll VL. Với tool này mình chúc bạn sẽ tạo những nhiều button như mong muốn tôn thêm vẻ đẹp của blog/website
Tạo Button
4 comments
<div>
<div>
<input type="button" value="Xem" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ẩn'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Xem'; }">
</div>
<div>
<div style="display: none; border:#4F4F4F 1px solid; padding: 4px; background:# ">
NỘI DUNG CẦN ẨN/HIỆN
</div>
</div>
</div>
Và bạn hãy sử dụng công cụ mình giới thiệu trong bài viết này để tạo style cho button này. Sau khi lấy được CSS bạn sử dụng bằng cách để nó trong thẻ style, ví dụ:
<style>
.button {
cursor:pointer;
border:1px solid #3f5691;
background-color:#3059ab;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#2770d6', endColorstr='#3059ab');
background-image:-webkit-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);
background-image:-moz-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);
background-image:-ms-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);
background-image:-o-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);
background-image:linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);
padding:20px 40px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
-webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151;
-moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151;
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151;
text-shadow:0px 1px 0px rgba(0,0,0,0.3);
color:#ffffff;
font:normal 16px 'Century Gothic',Helvetica,Arial,Sans-Serif;
text-decoration:none;
outline:none;
vertical-align:middle;
}
.button:hover {
border-color:#0f2852;
background-color:#49579c;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#49579c', endColorstr='#142b70');
background-image:-webkit-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);
background-image:-moz-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);
background-image:-ms-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);
background-image:-o-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);
background-image:linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);
color:#ffffff;
}
.button:active {
background-color:#142b70;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#142b70', endColorstr='#49579c');
background-image:-webkit-linear-gradient(top, #142b70, #49579c);
background-image:-moz-linear-gradient(top, #142b70, #49579c);
background-image:-ms-linear-gradient(top, #142b70, #49579c);
background-image:-o-linear-gradient(top, #142b70, #49579c);
background-image:linear-gradient(top, #142b70, #49579c);
}
</style>
Và để hiểu rõ hơn, bạn nên tạo một bài viết mới sau đó thực hành để xem công dụng của code mình đưa ra
Cảm ơn bạn đã ghé thăm Troll VL !
Insert Emoticons» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>
Mã Hóa Code Tạo và xem trước comments Cancel Reply
&Convert
'Convert
"Convert
<Convert
>