|
| Kumpulan Widget Tombol Button Blogger Tanpa JavaScript. |
Tombol Button
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.
Table of Contents
Tampilan desain Tombol Button , bisa ditampilkan dalam bentuk kotak, bulat, melengkung dengan efek shadow, gradient, neumorphism dan sebagainya.
A. 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 ]]></b:skin>
- 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
Keterangan :- Untuk merubah tombol button gradient , ganti color-1 dengan color-2 ....color-11
- Ganti tanda # dengan URL link anda.
Demo Button Gradient
Tampilan tombol button dengan efek gradient
B. 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.
C. 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 .
D. 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 ]]></b:skin>
- 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;
}
Kode Script HTML Button Hover
Terakhir, pilih dan salin kode script HTML di bawah ini, dan letakkan di halaman postingan sesuai dengan yang anda inginkan.
<div class="button button-1"target="blank" title="Sae Blog" onclick="window.open('https://www.sae.icu/')">Neon</div>
<div class="button button-2" target="blank" title="Sae Blog" onclick="window.open('https://www.sae.icu/)">Angle bg</div>
<div class="button button-3" target="blank" title="Sae Blog" onclick="window.open('https://www.sae.icu/')">Shadow</div>
<div class="button button-4"target="blank" title="Sae Blog" onclick="window.open('https://www.sae.icu/')">Pulse</div>
<div class="button button-5"target="blank" title="Sae Blog" onclick="window.open('https://www.sae.icu/')">Gradient</div>
Kustomisasi Button Hover
Keterangan :- 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