Bộ sưu tập nút bấm – HTML and CSS Buttons Style khá đẹp, dễ dàng chèn ở nhiều vị trí như trong bài viết, text widget,…
1. Nút bấm từ Themezee.
Code
1 2 3 4 5 |
<a href="https://bloggertemplate.info/" style="background: rgb(68, 68, 68); border: none; box-sizing: inherit; color: white; display: inline-block; font-family: "Hammersmith One", Tahoma, Arial; font-size: 1.125rem; margin: 0px 0.3em 10px 0px; outline: 0px; padding: 0.4em 1.6em; text-decoration-line: none; text-transform: uppercase; transition: all 0.3s ease;" target="_blank">THEME DEMO</a> <span style="background-color: white; color: #404040; font-family: Arimo, Tahoma, Arial; font-size: 17px;"> </span><a href="https://bloggertemplate.info/" id="single-theme-download" style="background: rgb(26, 107, 178); border: none; box-sizing: inherit; color: white; display: inline-block; font-family: "Hammersmith One", Tahoma, Arial; font-size: 1.125rem; margin: 0px 0.3em 10px 0px; padding: 0.4em 1.6em; text-decoration-line: none; text-transform: uppercase; transition: all 0.3s ease;">DOWNLOAD THEME</a> <span style="background-color: white; color: #404040; font-family: Arimo, Tahoma, Arial; font-size: 17px;"> </span><a href="https://bloggertemplate.info/" style="background: rgb(111, 196, 98); border: none; box-sizing: inherit; color: white; display: inline-block; font-family: "Hammersmith One", Tahoma, Arial; font-size: 1.125rem; margin: 0.2em 0.3em 0px 0px; padding: 0.4em 1.6em; text-decoration-line: none; text-transform: uppercase; transition: all 0.3s ease;">VIEW PRO VERSION</a> |
Demo
THEME DEMO DOWNLOAD THEME VIEW PRO VERSION
2.Nút bấm liên kết mạng xã hội từ iThuthua.
Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<span style="background-color: white; box-sizing: border-box; color: #000000; display: block; font-family: arial, sans-serif; font-size: 20px; font-weight: bold; line-height: 20px; margin-bottom: 14px;">Blogspot Templates</span> <div style="background-color: white; box-sizing: border-box; color: #4e565d; font-family: Arial, sans-serif; font-size: 16px; line-height: 21px; margin-bottom: 15px;"><span style="color: #008000;">blogspot templates free download,53 Best Free Responsive Blogger Templates 2020.</span></div> <a style="background-color: white; border-radius: 2px; border: 1px solid #3b5998; box-sizing: border-box; color: #3b5998; display: inline-block; font-family: Arial, sans-serif; font-size: 14px; line-height: 16.8px; margin: 0px 3px 10px; padding: 10px 14px; text-decoration-line: none; transition: all 0.2s;" href="https://bloggertemplate.info/" target="_blank" rel="noopener noreferrer">Facebook</a> <span style="background-color: white; color: #636363; font-family: 'arial' , sans-serif; font-size: 16px;"> </span><a style="background-color: white; border-radius: 2px; border: 1px solid #e95950; box-sizing: border-box; color: #e95950; display: inline-block; font-family: Arial, sans-serif; font-size: 14px; line-height: 16.8px; margin: 0px 3px 10px; padding: 10px 14px; text-decoration-line: none; transition: all 0.2s;" href="https://bloggertemplate.info/" target="_blank" rel="noopener noreferrer">Instagram</a> <span style="background-color: white; color: #636363; font-family: 'arial' , sans-serif; font-size: 16px;"> </span><a style="background-color: white; border-radius: 2px; border: 1px solid #00aced; box-sizing: border-box; color: #00aced; display: inline-block; font-family: Arial, sans-serif; font-size: 14px; line-height: 16.8px; margin: 0px 3px 10px; padding: 10px 14px; text-decoration-line: none; transition: all 0.2s;" href="https://bloggertemplate.info/" target="_blank" rel="noopener noreferrer">Twitter</a> |
Demo
Blogspot Templates
blogspot templates free download,53 Best Free Responsive Blogger Templates 2020.
3. Nút bấm chuyên mục
Code
1 |
<a href="https://bloggertemplate.info/"><span style="color: #ffffff; background: #1DA1F2; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); padding: 0.5em 1em; display: inline-block; margin: 0.5em; margin-left: 0em !important;"><strong>Đăng ký</strong></span></a><a href="https://bloggertemplate.info/"><span style="color: #ffffff; background: #F35022; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); padding: 0.5em 1em; display: inline-block; margin: 0.5em 0;"><strong>Dùng thử</strong></span></a> |
1 |
<a href="https://bloggertemplate.info/"><span style="color: #ffffff; background: #2196f38f; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); padding: 0.5em 1em; display: inline-block; margin: 0.5em; margin-left: 0em !important;"><strong>Đăng ký</strong></span></a><a href="https://bloggertemplate.info/"><span style="color: #ffffff; background: #00aecd94; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); padding: 0.5em 1em; display: inline-block; margin: 0.5em 0;"><strong>Dùng thử</strong></span></a> |
Demo
4. Nút bấm chuyên mục đơn giản đổi màu
Code CSS: dán vào CSS bổ sung của WordPress / Blogspot (Additional CSS).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.nut-bam a:hover { background: #80BB03 !important; color: white !important; border-radius:5px; } .nut-bam a:link, .nut-bam a:visited { width: fit-content; padding: 0.5em 1em; text-align: center; float: inherit; margin: 0em auto; color: #ffffff; background: #34B7E1; border-radius:5px; } |
code HTML dán vào đoạn văn, text widget hay chỗ nào bạn muốn nó hiển thị.
1 |
<div class="nut-bam"><a href="https://bloggertemplate.info/"><span style="font-family: arial;">Demo</span></a></div> |
Demo