Tombol Button adalah tombol yang tampak pada layar komputer pada sebuah program yang jika diklik akan terkait dengan perintah tertentu. Tampilan Tombol Button bisa terdiri dari teks , icon atau gabungan keduanya teks dan icon. Tampilan Tombol Button yang dibuat di bawah ini hasilnya memuaskan, hanya dengan bantuan script HTML dan CSS, tanpa JavaScript, karena JavaScript mengurangi kecepatan memuat halaman situs web.
Tampilan desain Tombol Button , bisa ditampilkan dalam bentuk kotak, bulat, melengkung dengan efek shadow, gradient, neumorphism dan sebagainya.
Widget Tombol Gradient Button
Gradient Button adalah tombol button dengan efek gradient ini berisi warna-warna cerah dan terlihat menarik saat ditampilkan. Efek bayangan digunakan untuk menyorot tombol dari latar belakang. Secara keseluruhan koleksi tombol gradien hasilnya menarik dan tampak bersih. Yang harus dilakukan adalah memilih desain tombol button yang disukai dan menggunakannya dalam halaman postingan anda.
Cara membuat dan menambahkan Tombol Button dengan efek gradient di halaman postingan Blogger, ikuti langkah-langkahnya sebagai berikut.
Kode Script CSS Button Gradient
- Pertama-tama Login ke Dashboard Blogger Anda.
- Pilih Tema.
- Klik icon panah ke bawah di sebelah tombol 'Sesuaikan'
- Klik Edit HTML, Anda akan diarahkan ke halaman pengeditan.
- Cari kode
]]></b:skin>kemudian salin script CSS dibawah ini, kemudian tempelkan di atas kode tersebut - Terakhir - Simpan.
.btn-hover {
width: 200px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
border: none;
background-size: 300% 100%;
border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.btn-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.btn-hover:focus {
outline: none;
}
.btn-hover.color-1 {
background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}
.btn-hover.color-2 {
background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}
.btn-hover.color-3 {
background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}
.btn-hover.color-4 {
background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
}
.btn-hover.color-5 {
background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
}
.btn-hover.color-6 {
background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);
box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
}
.btn-hover.color-7 {
background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645);
box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
}
.btn-hover.color-8 {
background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}
.btn-hover.color-9 {
background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}
.btn-hover.color-10 {
background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a , #FBB03B);
box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}
.btn-hover.color-11 {
background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);
box-shadow: 0 5px 15px rgba(242, 97, 103, .4);
}
Kode Script HTML Button Gradient
Terakhir, pilih dan salin kode script HTML di bawah ini, dan letakkan sesuai dengan yang anda inginkan.
<button class="btn-hover color-1" onclick="window.open('#')">1.Button</button>
<button class="btn-hover color-2" onclick="window.open('#')">2.Button</button>
<button class="btn-hover color-3" onclick="window.open('#')">3.Button</button>
<button class="btn-hover color-4" onclick="window.open('#')">4.Button</button>
<button class="btn-hover color-5" onclick="window.open('#')">5.Button</button>
<button class="btn-hover color-6" onclick="window.open('#')">6.Button</button>
<button class="btn-hover color-7" onclick="window.open('#')">7.Button</button>
<button class="btn-hover color-8" onclick="window.open('#')">8.Button</button>
<button class="btn-hover color-9" onclick="window.open('#')">9.Button</button>
<button class="btn-hover color-10" onclick="window.open('#')">10.Button</button>
<button class="btn-hover color-11" onclick="window.open('#')">11.Button</button>
Kustomisasi Button Gradient
- Untuk merubah tombol button gradient, ganti
color-1dengancolor-2....color-11 - Ganti tanda
#dengan URL link anda.
Demo Button Gradient
Tampilan tombol button dengan efek gradient
Widget Tombol Neumorphism Button
Neumorphism Button adalah tombol button dengan penampilan yang halus dan desain ikonik yang dirancang khusus yang akan memberikan sentuhan estetika pada situs web blogger Anda
Kode Script Button Neumorphism
Kode script HTML dan CSS Tombol Button Neumorphism, silahkan klik tombol button di bawah ini.
Widget Tombol Slider Button
Slider Button adalah tombol button dengan efek slider yang responsive, icon dan teks yang ada pada tombol button akan bergerak ke kiri atau ke kanan, pada saat cursor mouse di dekatkan ke tombol button tersebut. Tombol button efek slider yang di buat di bawah ini adalah untuk situs web dengan platform blogger.
Kode Script Button Slider
Kode script HTML dan CSS Tombol Button Slider, silahkan klik tombol dibawah ini.
Widget Tombol Style Hover Button
Hover Button Style adalah tombol button bergaya hover dengan berbagai kelebihan, diantaranya: efek hover yang menarik dan tampilan visibilitas tombol gaya baru. Sehingga memungkinkan untuk merubah tombol button lama anda ke tombol button baru ini.
Cara membuat dan menambahkan tombol button dengan efek hover di halaman postingan Blogger, ikuti langkah-langkahnya sebagai berikut.
Kode Script CSS Button Hover
- Pertama-tama Login ke Dashboard Blogger Anda.
- Pilih Tema.
- Klik icon panah ke bawah di sebelah tombol 'Sesuaikan'
- Klik Edit HTML, Anda akan diarahkan ke halaman pengeditan.
- Cari kode
]]></b:skin>kemudian salin script CSS dibawah ini, kemudian tempelkan di atas kode tersebut. - Terakhir - Simpan.
@import: url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
.container {
text-align: center;
}
h1 {
margin-left: 30px;
margin-bottom: 50px;
}
.button {
width: 140px;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
color: #000;
text-transform: uppercase;
font-weight: 300;
margin-left: 15px;
margin-bottom: 15px;
cursor: pointer;
display: inline-block;
}
.button-1 {
background-color: transparent;
border: 3px solid #00d7c3;
border-radius: 50px;
-webkit-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
color: #00d7c3;
}
.button-1:hover {
box-shadow: 0 0 10px 0 #00d7c3 inset, 0 0 20px 2px #00d7c3;
border: 3px solid #00d7c3;
}
.button-2 {
color: #fff;
border: 3px solid #c266d3;
background-color: #fff;
background-image: -webkit-linear-gradient(30deg, #c266d3 50%, transparent 50%);
background-image: linear-gradient(30deg, #c266d3 50%, transparent 50%);
background-size: 500px;
background-repeat: no-repeat;
background-position: 0%;
-webkit-transition: background 300ms ease-in-out;
transition: background 300ms ease-in-out;
}
.button-2:hover {
background-position: 100%;
color: #c266d3;
}
.button-3 {
border: 2px solid #3c73ff;
background-color: #3c73ff;
border-radius: 20px;
color: #fff;
transition: .3s;
}
.button-3:hover {
box-shadow: 8px 8px #99bdff;
transition: .3s;
}
.button-4 {
background-color: transparent;
border: 3px solid #ff0251;
color: #ff0251;
transition: .3s;
}
.button-4:hover {
animation: pulse 1s infinite;
transition: .3s;
}
@keyframes pulse {
0% {
transform: scale(1);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
.button-5 {
width: 150px;
border-radius: 5px;
background-color: #F4F200;
background-image: #F4F200;
background-image: -moz-linear-gradient(top, #fff 0%, #F4F200 100%);
background-image: -webkit-linear-gradient(top, #fff 0%,#F4F200 100%);
background-image: linear-gradient(to bottom, #fff 0%,#F4F200 100%);
background-size: 300px;
background-repeat: no-repeat;
background-position: 0%;
-webkit-transition: background 300ms ease-in-out;
transition: background 300ms ease-in-out;
}
.button-5:hover {
background-position: -200%;
transition: background 300ms ease-in-out;
}
Kustomisasi Button Hover
- Silahkan ganti nama title dan link url, dengan nama dan link url anda.
Demo Button Hover
Tampilan gaya tombol button dengan efek hover.
Demikian kami sajikan mengenai Kumpulan Widget Tombol Button tanpa JavaScript platform Blogger, semoga bermanfaat.
Source:
Techydarshan dan Bloggers
Tombol Warna Warni Responsive
Didalam kode CSS ini, saya menggunakan flex-wrap untuk mengatur item flex menjadi satu baris atau tidak secara fleksibel. Dengan aturan 1 banding 1 untuk setiap elemen yang digunakan, dalam hal ini adalah tombol.
Code Script CSS
Untuk mengatur tampilan lebar dari kolom yang digunakan untuk tombol, anda bisa mengganti kode width:300px sesuai dengan keinginan anda. Dan untuk memperbesar tampilan tombol, mengganti margin dan padding yang digunakan yaitu margin:5px;padding:10px;. Sedangkan untuk mengganti bentuk tampilan tombol, ganti penggunaan bordernya yaitu border-radius:50px.
.btn_wrapper{display:flex;justify-content:center;align-items:center;align-content:center;flex-wrap:wrap;width:300px;margin:0 auto;min-height:auto;}
.btn_col{flex:1 1 auto;margin:5px;padding:10px;text-align:center;transition:0.5s;background-size:200% auto;color:#212121;text-shadow:0px 0px 10px rgba(0,0,0,0.2);box-shadow:0 0 20px #eee;border-radius:50px;}
.btn_col:hover{background-position:right center;}
.btn_color1{background-image:linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);}
.btn_color2{background-image:linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);}
.btn_color3{background-image:linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);}
.btn_color4{background-image:linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%);}
.btn_color5{background-image:linear-gradient(to right, #ffecd2 0%, #fcb69f 51%, #ffecd2 100%);}
Code Script HTML
Setelah memasang kode CSS diatas kedalam template blog anda, simpan kode Html berikut ini. Kode dibawah ini bisa dipasang didalam artikel, dibagian sidebar ataupun ditempat yang ingin anda pasang. Untuk memasang kode Html ini kedalam widget atau kolom blog, baca petunjuknay di Cara Menambah Kolom Widget Blog
<div class="btn_wrapper"> <a href="#" class="btn_col btn_color1">Warna 1</a> <a href="#" class="btn_col btn_color2">Warna 2</a> <a href="#" class="btn_col btn_color3">Warna 3</a> <a href="#" class="btn_col btn_color4">Warna 4</a> <a href="#" class="btn_col btn_color5">Warna 5</a> </div>
Ganti href="#" dengan link atau tautan yang akan digunakan serta sisipkan item target="_blank" agar tautan terbuka di halaman baru.
Demo
Jika berhasil memasang kode tombol warna diatas, maka hasilnya akan terlihat seperti berikut:
Lebar tombol warna warni ini sangat responive yaitu mengikuti panjang pendeknya tulisan. Sehingga anda tidak perlu khawatir setiap teks atau anchor teks yang digunakan akan terputus. Namun sebagai saran, tetap gunakan teks yang pendek dan jelas. Contohnya adalah sebagai berikut:
Dengan mempelajari kode CSS untuk tombol warna warni diatas, anda bisa melakukan cara yang sama dengan menggunakannya di blog anda. Atau anda juga bisa melakukan perubahan dari setiap kode yang anda inginkan seperti yang sudah saya jelaskan diatas. Selamat mencoba.