Cara Membuat Tombol Button Di Blogger Dengan CSS HTML dan Beberapa Style Gaya Button

Style Button
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;
}

Style Button 2

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

Style Button 3

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

Style Button 4

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

Style Button 5

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

Style Button 6

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

Style Button 7

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

Style Button 8

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

Style Button 9

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

Style Button 10

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

Style Button 11

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

Style Button 12

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

Style Button 13

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

Style Button 14

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