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

DEMO

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.

Bagikan Artikel ini