HTML and CSS Button Styles – Blogger Template

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

<a  href="https://bloggertemplate.info/" style="background: rgb(68, 68, 68); border: none; box-sizing: inherit; color: white; display: inline-block; font-family: &quot;Hammersmith One&quot;, 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;">&nbsp;</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: &quot;Hammersmith One&quot;, 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;">&nbsp;</span><a  href="https://bloggertemplate.info/" style="background: rgb(111, 196, 98); border: none; box-sizing: inherit; color: white; display: inline-block; font-family: &quot;Hammersmith One&quot;, 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>

<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>

<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>

<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

<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>

<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

<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;">blogspot templates free download,53 Best Free Responsive Blogger Templates 2020.</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;"> <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;"> <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.

Facebook Instagram Twitter

3. Nút bấm chuyên mục

Code

<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>

<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

Đăng kýDùng thử

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).

.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;
}

.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ị.

<div class="nut-bam"><a href="https://bloggertemplate.info/"><span style="font-family: arial;">Demo</span></a></div>

1	<div class="nut-bam"><a href="https://bloggertemplate.info/"><span style="font-family: arial;">Demo</span></a></div>

Demo

Demo

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

2.Nút bấm liên kết mạng xã hội từ iThuthua.

Code

Demo

3. Nút bấm chuyên mục

Code

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).

code HTML dán vào đoạn văn, text widget hay chỗ nào bạn muốn nó hiển thị.

Viết một bình luận Hủy