Cara Membuat Tombol Dengan Efek Animasi Border

Cara Membuat Tombol Dengan Efek Animasi Border

Button atau yang paling kita kenal sebagai Tombol merupakan bagian penting yang ada dalam sebuah website.

Di internet terdapat banyak sekali website khususnya blogger dan wordpress, biasanya sering kita jumpai URL / Link / Tautan yang mengarah ke halaman lain di situs tersebut.

URL / Link / Tautan ini kita modifikasi dengan menggunakan kode CSS sehingga menjadi sebuah tombol yang lebih menarik untuk di klik oleh setiap pengunjung situs tersebut.

Apalagi jika menggunakan efek animasi pada kode CSS tersebut, pasti akan lebih menarik perhatian orang yang melihatnya.

Tombol biasanya digunakan untuk mengajak pengunjung situs Anda untuk melakukan action atau aksi ketika sedang berada di dalamnya, contohnya mengajak pengunjung untuk menekan tombol buy atau beli, tombol subscribe atau berlangganan, tombol demo download, dan tombol lainnya.

Baca juga: Cara Membuat Tombol Back to Top di Blogger

Tombol ini menggunakan pure CSS dan tidak menggunakan Font Awesome sehingga tidak akan memberi beban yang berat pada loading blog Anda.

Untuk mempercantik tombol ini Anda bisa menambahkan font awesome secara manual.

Bagi Anda yang tertarik untuk membuat button animated border on hover atau tombol dengan animasi garis saat di sentuh cursor diatasnya, silahkan untuk menyimak langkah-langkahnya di bawah ini.

Cara Membuat Button Animation Border on Hover



Pertama, masukkan kode css ini di atas kode ]]></b:skin> atau </style>

/* Button Animated Border on Hover */
@import url(https://fonts.googleapis.com/css?family=BenchNine:700);
.btn-border {
  background-color: #c47135;
  border: none;
  color: #ffffff!important;
  cursor: pointer;
  display: inline-block;
  font-family: 'BenchNine', Arial, sans-serif;
  font-size: 1em;
  font-size: 22px;
  line-height: 1em;
  margin: 15px 40px;
  outline: none;
  padding: 12px 40px 10px;
  position: relative;
  text-transform: uppercase;
  font-weight: 700;
}

.btn-border:before,
.btn-border:after {
  border-color: transparent;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  border-style: solid;
  border-width: 0;
  content: "";
  height: 24px;
  position: absolute;
  width: 24px;
}

.btn-border:before {
  border-color: #c47135;
  border-top-width: 2px;
  left: 0px;
  top: -5px;
}

.btn-border:after {
  border-bottom-width: 2px;
  border-color: #c47135;
  bottom: -5px;
  right: 0px;
}

.btn-border:hover {
  background-color: #c47135;
}

.btn-border:hover:before,
.btn-border:hover:after {
  height: 100%;
  width: 100%;
}

Catatan:
- Untuk mengganti warnanya silahkan gunakan tool Color Picker.
- Untuk kode yang saya beti tanda bold / tebal merupakan kode jenis font yang digunakan, Anda bisa menghapusnya atau mengubahnya menjadi jenis font lainnya.

Kedua, masukkan kode class='btn-border' ini pada URL / Link / Tautan yang ingin di tambahkan efek animasi border ini, contohnya:

<a class='btn-border' href='https://codepen.io/FicriPebriyana/full/LmaaQE/' target='_blank' title='DEMO'>DEMO</a>

Selesai, silahkan Anda coba mempraktekannya secara langsung di blog Anda.

Jika mengalami masalah, silahkan hubungi kami melalui halaman kontak, kami akan senang membantu Anda.

Itulah artikel mengenai cara membuat tombol dengan efek animasi border saat di sentuh cursor, semoga bermanfaat.
Cara Manual Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

4 Komentar untuk "Cara Membuat Tombol Dengan Efek Animasi Border"

  1. boleh nanyak gak gimana cara membuat tempat untuk menaruh script seperti di atas ?

    apa ada tutorialnya gak ?

    BalasHapus
    Balasan
    1. Itu namanya syntax highlighter, disini juga sudah ada tutorialnya. Silahkan di cari saja.

      Hapus
  2. bang saya udah coba ke template blog saya berhasil namun posisi button nya ko nggak di tengah tengah ya di mode pc letak button nya ada di sebelah kiri begitu pula di mode mobile tataletak button nya ada di sebalh kiri yg saya mau mau di mode apa aja tataletak button nya ada di tengah tengah bisa kah kasih tau cara nya

    BalasHapus
    Balasan
    1. Kode ini:
      <a class="btn-border" href="https://codepen.io/FicriPebriyana/full/LmaaQE/" target="_blank" title="DEMO">DEMO</a>

      harus di bungkus manual pakai kode:
      <div style="text-align:center">
      CODE BUTTON
      </div>

      hasilnya jadi seperti ini:
      <div style="text-align:center">
      <a class="btn-border" href="https://codepen.io/FicriPebriyana/full/LmaaQE/" target="_blank" title="DEMO">DEMO</a>
      </div>

      Hapus
Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel