Cara Membuat Tombol Button Di Blogger Dengan CSS HTML dan Beberapa Style Gaya Button
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaQWFjCchCLfOfC3m6dcwucUVWW86_BlH1-A3eYTdgyZcooO5jWGMHR7OK-NDy_qgpyEoYp3wof0vJzIL3BBt86g9wXjKg70pEy94KgNp29nvhFsw5iQIZgekshM6UmoAcrDhVIFjsx70gyzem6-CPPKtZ08bRPxVD9NP3FYVsbYGTEei7WowuEZGxPSX3/s6912/Button.png)
Penggunaan tombol button didalam sebuah website memanglah penting dan ini Beberapa Style (gaya) Tombol button yang bisa kalian terapakan di blogger maupun di website.
<button class='ztnbutton'>Button</button>
Style Button pertama
.ztnbutton {
cursor: pointer;
outline: 0;
color: #fff;
background-color: #0d6efd;
border-color: #0d6efd;
display: inline-block;
font-weight: 400;
line-height: 1.5;
text-align: center;
border: 1px solid transparent;
padding: 6px 12px;
font-size: 16px;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.ztnbutton:hover {
color: #fff;
background-color: #0b5ed7;
border-color: #0a58ca;
}
.ztnbutton {
cursor: pointer;
outline: 0;
display: inline-block;
font-weight: 400;
line-height: 1.5;
text-align: center;
background-color: transparent;
border: 1px solid transparent;
padding: 6px 12px;
font-size: 1rem;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
color: #0d6efd;
border-color: #0d6efd;
}
.ztnbutton:hover {
color: #fff;
background-color: #0d6efd;
border-color: #0d6efd;
}
.ztnbutton {
border: 0;
outline: 0;
cursor: pointer;
color: white;
background-color: rgb(84, 105, 212);
box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(84 105 212) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 8%) 0px 2px 5px 0px;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
padding: 4px 8px;
display: inline-block;
min-height: 28px;
transition: background-color .24s,box-shadow .24s;
}
.ztnbutton:hover {
box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(84 105 212) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 8%) 0px 3px 9px 0px, rgb(60 66 87 / 8%) 0px 2px 5px 0px;
}
.ztnbutton {
border: 0;
outline: 0;
cursor: pointer;
color: rgb(60, 66, 87);
background-color: rgb(255, 255, 255);
box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(60 66 87 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 8%) 0px 2px 5px 0px;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
padding: 4px 8px;
display: inline-block;
min-height: 28px;
transition: background-color .24s,box-shadow .24s;
}
.ztnbutton:hover {
box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(60 66 87 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 8%) 0px 3px 9px 0px, rgb(60 66 87 / 8%) 0px 2px 5px 0px;
}
.ztnbutton {
display: inline-block;
outline: none;
cursor: pointer;
font-size: 16px;
line-height: 20px;
font-weight: 600;
border-radius: 8px;
padding: 14px 24px;
border: none;
transition: box-shadow 0.2s ease 0s, -ms-transform 0.1s ease 0s, -webkit-transform 0.1s ease 0s, transform 0.1s ease 0s;
background: linear-gradient(to right, rgb(230, 30, 77) 0%, rgb(227, 28, 95) 50%, rgb(215, 4, 102) 100%);
color: #fff;
}
.ztnbutton {
display: inline-block;
outline: none;
cursor: pointer;
font-size: 16px;
line-height: 20px;
font-weight: 600;
border-radius: 8px;
padding: 13px 23px;
border: 1px solid #222222;
transition: box-shadow 0.2s ease 0s, -ms-transform 0.1s ease 0s, -webkit-transform 0.1s ease 0s, transform 0.1s ease 0s;
background: #fff;
color: #222222;
}
.ztnbutton:hover {
border-color: #000000;
background: #f7f7f7;
}
.ztnbutton {
display: inline-block;
outline: 0;
border: none;
cursor: pointer;
font-weight: 600;
border-radius: 4px;
font-size: 13px;
height: 30px;
background-color: #9147ff;
color: white;
padding: 0 20px;
}
.ztnbutton:hover {
background-color: #772ce8;
}
.ztnbutton {
display: inline-block;
outline: 0;
cursor: pointer;
padding: 5px 16px;
font-size: 14px;
font-weight: 500;
line-height: 20px;
vertical-align: middle;
border: 1px solid;
border-radius: 6px;
color: #ffffff;
background-color: #2ea44f;
border-color: #1b1f2326;
box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px 0px inset;
transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
transition-property: color, background-color, border-color;
}
.ztnbutton:hover {
background-color: #2c974b;
border-color: #1b1f2326;
transition-duration: 0.1s;
}
.ztnbutton {
display: inline-block;
outline: 0;
cursor: pointer;
padding: 5px 16px;
font-size: 14px;
font-weight: 500;
line-height: 20px;
vertical-align: middle;
border: 1px solid;
border-radius: 6px;
color: #24292e;
background-color: #fafbfc;
border-color: #1b1f2326;
box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px 0px inset;
transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
transition-property: color, background-color, border-color;
}
.ztnbutton:hover {
background-color: #f3f4f6;
border-color: #1b1f2326;
transition-duration: 0.1s;
}
.ztnbutton {
display: inline-block;
outline: 0;
cursor: pointer;
padding: 5px 16px;
font-size: 14px;
font-weight: 500;
line-height: 20px;
vertical-align: middle;
border: 1px solid;
border-radius: 6px;
color: #0366d6;
background-color: #fafbfc;
border-color: #1b1f2326;
box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px 0px inset;
transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
transition-property: color, background-color, border-color;
}
.ztnbutton:hover {
color: #ffffff;
background-color: #0366d6;
border-color: #1b1f2326;
box-shadow: rgba(27, 31, 35, 0.1) 0px 1px 0px 0px, rgba(255, 255, 255, 0.03) 0px 1px 0px 0px inset;
transition-duration: 0.1s;
}
.ztnbutton {
display: inline-block;
outline: 0;
cursor: pointer;
text-align: center;
border: 0;
padding: 7px 16px;
min-height: 36px;
min-width: 36px;
color: #ffffff;
background: #008060;
border-radius: 4px;
font-weight: 500;
font-size: 14px;
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 0px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset;
}
.ztnbutton:hover {
background: #006e52;
}
.ztnbutton {
display: inline-block;
outline: 0;
cursor: pointer;
text-align: center;
border: 1px solid #babfc3;
padding: 7px 16px;
min-height: 36px;
min-width: 36px;
color: #202223;
background: #ffffff;
border-radius: 4px;
font-weight: 500;
font-size: 14px;
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 0px 0px;
}
.ztnbutton:hover {
background: #f6f6f7;
outline: 1px solid transparent;
}
.ztnbutton13 {
display: inline-block;
outline: none;
cursor: pointer;
font-weight: 500;
border: 1px solid transparent;
border-radius: 2px;
height: 36px;
line-height: 34px;
font-size: 14px;
color: #ffffff;
background-color: #007c89;
transition: background-color 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s;
padding: 0 18px;
}
.ztnbutton13:hover {
color: #ffffff;
background-color: #006570;
}
.ztnbutton14 {
display: inline-block;
outline: none;
cursor: pointer;
font-weight: 500;
border: 1px solid transparent;
border-radius: 2px;
height: 36px;
line-height: 34px;
font-size: 14px;
color: #241c15;
background-color: #efeeea;
transition: background-color 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s;
padding: 0 18px;
}
.ztnbutton14:hover {
color: #241c15;
background-color: #d9d7cd;
}
Posting Komentar untuk "Cara Membuat Tombol Button Di Blogger Dengan CSS HTML dan Beberapa Style Gaya Button"
Posting Komentar